欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在react项目中引入iconfont图标

程序员文章站 2024-02-16 18:23:40
...

在做react的项目时 引入了ant design组件库,由于组件库的图标 有限,想在项目中引入更多的图标,查了半天终于找到了解决办法。

解决办法

  1. 进入阿里巴巴图标库网站 登录
  2. 选择自己需要的图标,加入购物车。
  3. 点击选择之后的购物车,选择添加至项目,如果没有项目,可以新建。
    在react项目中引入iconfont图标
  4. 下载图标至本地,解压文件,找到iconfont.js文件。
    在react项目中引入iconfont图标
  5. 将iconfont.js文件放入 utils文件夹中。
  6. 在页面中引入 iconfont.js。
    const IconFont = Icon.createFromIconfontCN({
      scriptUrl: iconFont
    })
    
    别忘了 import { Icon } from 'antd'
    然后就可以像用ant design 的Icon 一样了。
相关标签: ant design iconfont