加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react+webpack+antd框架自定义使用阿里iconfont图标。

发布时间:2020-12-15 20:39:23 所属栏目:百科 来源:网络整理
导读:? 1. 首先打开iconfont,找到我们需要的icon,如果要icon跟随字体选中状态的颜色改变而改变,尽量使用单色图标。如图: 2、加入购物车之后,点击下载代码,放到桌面,将文件夹下的iconfont.js文件引入项目中,我一般放在util文件夹下,如图: 3、在需要的.js

?

1. 首先打开iconfont,找到我们需要的icon,如果要icon跟随字体选中状态的颜色改变而改变,尽量使用单色图标。如图:


2、加入购物车之后,点击下载代码,放到桌面,将文件夹下的iconfont.js文件引入项目中,我一般放在util文件夹下,如图:


3、在需要的.jsx页面下引入我们的iconfont.js文件:

```
import iconFont from ‘../../../utils/iconfont.js‘
const IconFont = Icon.createFromIconfontCN({
scriptUrl: iconFont
})
```
4、在render中键入我们下载好的icon名称,可以在download文件夹下打开demo_fontclass.html页面,复制类名,加入到我们render中:

?


5、.jsx页面图标代码:

```
render () {
<IconFont type=‘icon-kaoherenwujihua‘ />
}
```
6、最后已经引入成功了,根据选中状态自动跟随文字颜色。

?

小仙女奉上,有什么不对的可以畅所欲言哦!!!!!!react+antd框架自定义使用阿里iconfont图标。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读