【React】前端项目引入阿里图标

【React】前端项目引入阿里图标

• 方式1
• • 1、登录自己的iconfont-阿里巴巴矢量图标库，把需要的图标加入到自己的项目中去；
  • [2、加入并进入到项目中去选择Font class 并下载到本地](#2、加入并进入到项目中去选择Font class 并下载到本地)
  • 3、得到的文件夹如下
  • [4. 把红框中的部分粘贴到自己的项目中（public 文件目录下）；](#4. 把红框中的部分粘贴到自己的项目中（public 文件目录下）；)
  • [5、在public文件夹下的 index.html 引入字体图标,注意引入路径要正确](#5、在public文件夹下的 index.html 引入字体图标,注意引入路径要正确)
  • [6. 项目中使用图标](#6. 项目中使用图标)
• 方式2
• • 1、登录自己的iconfont-阿里巴巴矢量图标库，把需要的图标加入到自己的项目中去；
  • 2、加入并进入到项目中去选择Symbol点击复制代码
  • 3、安装@ant-design/icons
  • [4. 新建一个MyIcon.js文件内容如下](#4. 新建一个MyIcon.js文件内容如下)
  • 5、在项目中使用

方式1

1、登录自己的iconfont-阿里巴巴矢量图标库，把需要的图标加入到自己的项目中去；

2、加入并进入到项目中去选择Font class 并下载到本地

3、得到的文件夹如下

4. 把红框中的部分粘贴到自己的项目中（public 文件目录下）；

5、在public文件夹下的 index.html 引入字体图标,注意引入路径要正确

<link rel="stylesheet" href="./iconfont/iconfont.css">   // 引入阿里云字体图标css

6. 项目中使用图标

//注意：iconfont是固定的，icon-sousuokuang为图片红框部分
<i className='iconfont sousuokuang'></i>

注意：iconfont是固定的，icon-sousuokuang为图片红框部分

方式2

1、登录自己的iconfont-阿里巴巴矢量图标库，把需要的图标加入到自己的项目中去；

2、加入并进入到项目中去选择Symbol点击复制代码

• 重点注意！！！记得先点击更新代码再点击复制获取得到链接，在开发中，有一个坑，有些同学中途在图标项目中添加了新的图标，然后没有及时更新获取链接，导致使用新图标时不显示。
  

3、安装@ant-design/icons

npm install --save @ant-design/icons

4. 新建一个MyIcon.js文件内容如下

import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
export default MyIcon

5、在项目中使用

//引入图标组件,注意路径
import MyIcon  from './MyIcon.js'
<MyIcon type="(你的icon名字)"/>

注意：你的icon名字 icon-sousuokuang为图片红框部分

最后，如果能帮到您