search

stephane-monnot / react-vertical-timeline

Vertical timeline for React.js
https://stephane-monnot.github.io/react-vertical-timeline/
MIT License
1.07k stars 158 forks source link

How to change icons #125

Closed forgyforg closed 2 years ago

forgyforg commented 2 years ago

How do you change the icons? You have icon={<WorkIcon />}, but what is WorkIcon? Does it matter what type of file/size? I'm new to react and still not sure how to add images so if you could tell me where the image needs to be included that would be great too!

I put the timeline component and code in the src directory of my app and included this at the top of the file using timeline: const logo = './logo.ico' Then in each VerticalTimelineElement, I do this for icon prop 

<VerticalTimelineElement
    icon={logo}
>

but when I look at where logo should be on browser, I just see the a string with the logos path:

Screenshot from 2021-10-22 15-31-37

stephane-monnot commented 2 years ago

You can pass a img tag like this : 

<VerticalTimelineElement
    icon={<img src="./logo.png" />}
>
forgyforg commented 2 years ago

Hmm now it's just showing an icon that I think indicates it can't find the file? The path is definitely correct, though. Screenshot from 2021-10-23 16-12-40

stephane-monnot commented 2 years ago

If your image is not in the public folder, it's normal.

You need to import your image if you want to use it.

https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react