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

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为图片红框部分
在这里插入图片描述
最后,如果能帮到您
在这里插入图片描述

相关推荐

  1. 前端】Vite项目图片动态引入

    2024-01-31 12:46:02       19 阅读
  2. ElementUI图标少,引入阿里矢量图标

    2024-01-31 12:46:02       19 阅读
  3. react批量引入svg图标

    2024-01-31 12:46:02       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-31 12:46:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-31 12:46:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-31 12:46:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-31 12:46:02       18 阅读

热门阅读

  1. Android --- Content Provider是使用示例,通俗易懂

    2024-01-31 12:46:02       34 阅读
  2. flutter 修改状态栏

    2024-01-31 12:46:02       31 阅读
  3. mongodb config

    2024-01-31 12:46:02       31 阅读
  4. 知识价值1-github站点域名

    2024-01-31 12:46:02       34 阅读
  5. Python - 整理 MySQL 慢查询日志

    2024-01-31 12:46:02       38 阅读
  6. Blender Object 的 name 字段不是 string

    2024-01-31 12:46:02       23 阅读
  7. C Primer Plus(第六版)14.17 复习题 第5题

    2024-01-31 12:46:02       26 阅读