把 iconfont 的图标下载到 React 项目中使用

背景

由于需要一些形状图标，这里我就打算使用公开开源的图标库，来实现，于是在 iconfont 找到一个库：www.iconfont.cn/collections… 下面就来把这个里面的所有图标都导入到本地，可以快速使用

使用

1） 新建项目，在导航栏的“资源管理下”有我的项目 2）找到想要的图标，注意看是否公开，加入收藏，然后把需要的图标都加入购物车 3）点击购物车，添加到项目 4）进入我们的项目，点击 symbol，点击下载到本地 5）解压得到对应的 js 文件，放到项目的 public 下，然后在 document.ejs 引入，<script type="text/javascript" src="./iconfont.js"></script> 6) 封装IconFont 组件

import { type FC, memo } from 'react';
import './index.less';

/***
 * name: 去图标库查看
 * iconfont 字体图标封装。图标库：xxxx
 */
const IconFont: FC<{ name: string; style?: React.CSSProperties }> = ({ name, ...p }) => {
  return (
    <svg className="icon-font" {...p} aria-hidden="true">
      <use xlinkHref={'#icon-' + name} />
    </svg>
  );
};

export default memo(IconFont);

使用 示例

import IconFont from '@/components/IconFont';
const UseIcon: FC = () => {
  return (
    <div>
      <IconFont
          name="cvliubianxing1"
          style={{
            fontSize: '22px',
            color: '#9063d4',
          }}
        />
    </div>
  );
};

export default memo(UseIcon);

注意：

如果使用发现图标自带颜色，那么是因为图标本身是有颜色的，那么在通过 symbol 获取图标时会在 svg 的path 中增加 fill 属性，导致无法更改颜色，如果需要动态修改颜色，需要重新添加该图标(无色的图标)，两种方式修复这个问题 1）获取在 symbol 的 js 文件中程序删除 fill 属性，打开对应 js 文件，全局搜索 fill，删除对应的代码（代码示例：fill="#181818"） 2）去 iconfont 去色后生成新的 js 文件，使用新的 js 文件，

多人协作

一般在公司，应该有开发和运营或者产品，可能他们需要一些其他图标，我们就需要给他们权限，让他们添加图标，然后，开发者进行更新 项目中，添加成员即可，当添加后，再下载，到本地进行更新 js 代码即可 到这里就结束啦，如果觉得有用，记得点赞，收藏，关注哦！