React：如何在VerticalTimelineElement中插入自定义图标？

正确可运行代码 #

// 顶部导入，静态资源默认用default导入，不需要解构
import MyIcon from "./myIcon.png"
import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component"
// 必须导入组件自带的基础样式，否则会出现布局异常、图标不显示等问题
import "react-vertical-timeline-component/style.min.css"

// 组件内调用写法
<VerticalTimelineElement 
  icon={
    <img 
      src={MyIcon} 
      style={{ width: '100%', height: '100%', objectFit: 'contain' }} 
      alt="时间线图标"
    />
  } 
  key={index} 
  date={item.date}
>
  {/* 你的时间线卡片内容 */}
</VerticalTimelineElement>

之前尝试失败的原因说明 #

• 方案1报错：PNG等静态资源默认仅支持default导出，不能使用import { myIcon }的解构导入写法
• 方案2报错：import { ReactComponent as XXX }是SVG文件专属的导入语法，PNG格式不支持该特性
• 方案3报错：VerticalTimelineElement的icon属性要求传入React元素，直接传入字符串类型的图片路径不符合类型校验
• 方案4无报错但图标不显示：绝大多数是未导入组件自带的样式文件导致布局异常，少数是img标签未设置适配父容器的宽高样式

可选优化方案 #

如果可以将PNG图标转为SVG格式，使用体验会更灵活：

1. 将图标导出为SVG格式后放到项目目录
2. 导入写法：import { ReactComponent as MyIcon } from "./myIcon.svg"
3. 组件调用：icon={<MyIcon style={{ width: '100%', height: '100%' }} />}
4. 可以直接修改SVG的fill、stroke等属性自定义图标颜色，不需要额外切图

内容的提问来源于stack exchange，提问作者Andreas G.