1. 程式人生 > >react+webpack+antd框架自定義使用阿里iconfont圖示。

react+webpack+antd框架自定義使用阿里iconfont圖示。

 

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圖示。