批量引入iconfront圖標(biāo)到項目次企，當(dāng)想繼續(xù)添加圖標(biāo)時脯颜，每次添加完不用重新下載項目圖標(biāo)文件并導(dǎo)入，可以動態(tài)更新圖標(biāo)舞蔽。
相關(guān)插件：
- mini-program-iconfont-cli
- react-native-iconfont-cli
- uni-app-iconfont-cli
- vue-iconfont-cli
- react-iconfont-cli
- flutter-iconfont-cli
- taro-iconfont-cli
github地址：
https://github.com/iconfont-cli
用法都差不多荣病，以react-iconfont-cli為例：
1、安裝插件
# Yarn
yarn add react-iconfont-cli --dev
# Npm
npm install react-iconfont-cli --save-dev
2渗柿、生成配置文件
npx iconfont-init
此時項目根目錄會生成一個iconfont.json的文件个盆，內(nèi)容如下：
{
"symbol_url": "請參考README.md，復(fù)制官網(wǎng)提供的JS鏈接",
"use_typescript": false,
"save_dir": "./src/components/iconfont",
"trim_icon_prefix": "icon",
"unit": "px",
"default_icon_size": 18
}
symbol_url ：復(fù)制iconfont官網(wǎng)提供的項目鏈接朵栖。.js后綴而不是.css后綴颊亮。
use_typescript ：項目使用Typescript編寫，設(shè)置為true陨溅。
save_dir ：根據(jù)iconfont圖標(biāo)生成的組件存放的位置终惑。每次生成組件之前，該文件夾都會被清空门扇。
unit ：圖標(biāo)的單位雹有，默認(rèn)px，推薦用rem單位臼寄。
default_icon_size ：默認(rèn)的字體大小霸奕，后期可以通過size屬性自定義。
3吉拳、生成React標(biāo)準(zhǔn)組件
npx iconfont-h5
4质帅、使用
1、使用匯總Icon組件：
import React from 'react';
import IconFont from '../src/iconfont';
export const App = () => {
return (
<div>
//圖標(biāo)尺寸
<IconFont name="alipay" size={20} />
<IconFont name="wechat" />
//圖標(biāo)單色
<IconFont name="alipay" color="green" />
//圖標(biāo)多色
<IconFont name="alipay" color={['green', 'orange']} />
</div>
);
};
2留攒、使用單個圖標(biāo)临梗。這樣可以避免沒用到的圖標(biāo)也打包進(jìn)App：
import React from 'react';
import IconAlipay from '../src/iconfont/IconAlipay';
import IconWechat from '../src/iconfont/IconWechat';
export const App = () => {
return (
<div>
<IconAlipay size={20} />
<IconWechat />
</div>
);
};
5、更新圖標(biāo)
只需更改配置symbol_url稼跳，然后再次執(zhí)行npx iconfont-h5即可生成最新的圖標(biāo)組件
# 修改 symbol_url 配置后執(zhí)行：
npx iconfont-h5
