UseIconfontInReact

1. 获取当前 icon 库

2. 全局文件 index.html 添加对 iconfont 的支持

head标签中添加以下代码

  <script src="./iconfont.js"></script>
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>

3. 使用 svg

• 注意 className 类名 和 xlikHref 需要用小驼峰的写法。

<svg className={`icon ${styles["dynamic-delete-button"]}`} aria-hidden="true">
  <use xlinkHref="#icon-shanchu"></use>
</svg>

附录

react 中使用 iconfont - 掘金 (juejin.cn)