批量引入iconfront圖標(biāo)到項(xiàng)目，當(dāng)想繼續(xù)添加圖標(biāo)時(shí)，每次添加完不用重新下載項(xiàng)目圖標(biāo)文件并導(dǎo)入，可以動(dòng)態(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

此時(shí)項(xiàng)目根目錄會(huì)生成一個(gè)iconfont.json的文件，內(nèi)容如下：

{
    "symbol_url": "請(qǐng)參考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)提供的項(xiàng)目鏈接。.js后綴而不是.css后綴。

use_typescript ：項(xiàng)目使用Typescript編寫，設(shè)置為true。

save_dir ：根據(jù)iconfont圖標(biāo)生成的組件存放的位置。每次生成組件之前，該文件夾都會(huì)被清空。

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、使用單個(gè)圖標(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