React中引入阿里Svg图标方法

React中引入阿里Svg图标方法

Iconfont-阿里巴巴矢量图标库

1、进入图标库里找到你想要的Icon图标，选择添加入库

2、选择添加入库后，将图标“添加至项目”，放到自己的项目当中。

3、在“我的项目”内找到要使用的Icon，点击“查看在线链接”，如果是第一次使用，还需要点击生成链接。

4、将生成的代码点击复制。

注意：从 4.0 开始，antd 不再内置 Icon 组件，需要使用独立的包 @ant-design/icons

需要自行安装依赖：

npm install --save @ant-design/icons

使用代码：

import { createFromIconfontCN } from '@ant-design/icons';

const MyIcon = createFromIconfontCN({
  scriptUrl: '生成的链接', // 在 iconfont.cn 上生成
});
<MyIcon type="(icon的名字)" />

Icon的名字点击“复制代码”即可获取。

如果想要修改图标的大小，写一份样式即可

<MyIcon type="(你的icon名字)" className={styles.icons}/>

样式文件：

.icons{
    font-size: xxx px  //设置图标大小
}