React: How to insert my own icon in a VerticalTimelineElement?


I want to use my own icon for a VerticalTimelineElement – I import them like so:

import { myIcon } from "./myIcon.png"

import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component"

But I am failing in using it – I have tried the following ways:

1: <VerticalTimelineElement icon={myIcon} key={index} date={item.date}>
-> I get the response: "export ‘myIcon’ (imported as ‘myIcon’) was not found in ‘./myIcon.png’ (possible exports: default)"

2: I change my code to import the file:

import { ReactComponent as MyIcon } from "./myIcon.png"
and I change the input for the icon inside the Element like so:

icon={ < MyIcon /> }
-> I get the response: "export ‘ReactComponent’ (imported as ‘MyIcon’) was not found in ‘./myIcon.png’ (possible exports: default)"

3: import MyIcon from "./myIcon.png" and icon={MyIcon}
-> I get: "Warning: Failed prop type: Invalid prop icon of type string supplied to VerticalTimelineElement, expected a single ReactElement."

4: import MyIcon from "./myIcon.png" and icon={<img src={MyIcon} />}
-> here, I don’t even get an error, the picture just does not appear and instead there is that placeholder for when it could not be loaded

I can guarantee that there were no spelling mistakes (I tested myriad times) and I am greatly grateful for any help 🙂

Source: React – Stack Overflow

November 14, 2021
Category : News
Tags: icons | image | png | react-component | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.