当前位置：首页 > news >正文

react使用createFromIconfontCN，自定义iconfont 图标

news 来源：原创 2025/6/21 2:29:45

记录react+antdesign项目中使用createFromIconfontCN，自定义iconfont 图标
效果图：
在这里插入图片描述

import { createFromIconfontCN } from '@ant-design/icons';const MyIcon = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);  // icon-example的名字可以自定义

接下来具体说一下怎么在 iconfont.cn 上生成scriptUrl
首先打开iconfont官网登录注册
登录后将选中的icon加入购物车
在这里插入图片描述
打开购物车可以看到里面添加的所有icon，点击下方按钮添加到项目

可以创建新的项目，也可以将图标加到旧项目里面

在这里插入图片描述

在这里插入图片描述

引用时

<MyIcon type="icon-home" />

注意：
1.如果是菜单栏的icon，注意不要使用icon本身带颜色的，也不要在项目里修改icon的颜色，否则选中菜单时，icon不会自动变色，比如上图的icon-kehu，本身自带黑色，选中时icon还是黑色
2.每次修改iconfont项目里的图标，或者新增图标到iconfont项目中，都要重新生成scriptUrl