各种 iconfont-cli 不用手动下载替换啦～

批量引入iconfront图标到项目，当想继续添加图标时，每次添加完不用重新下载项目图标文件并导入，可以动态更新图标。

相关插件：

• 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的文件，内容如下：

{
    "symbol_url": "请参考README.md，复制官网提供的JS链接",
    "use_typescript": false,
    "save_dir": "./src/components/iconfont",
    "trim_icon_prefix": "icon",
    "unit": "px",
    "default_icon_size": 18
}

symbol_url ：复制iconfont官网提供的项目链接。.js后缀而不是.css后缀。

use_typescript ：项目使用Typescript编写，设置为true。

save_dir ：根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。

unit ：图标的单位，默认px，推荐用rem单位。

default_icon_size ：默认的字体大小，后期可以通过size属性自定义。

3、生成React标准组件

npx iconfont-h5

4、使用

1、使用汇总Icon组件：

import React from 'react';
import IconFont from '../src/iconfont';

export const App = () => {
  return (
    <div>
      //图标尺寸
      <IconFont name="alipay" size={20} />
      <IconFont name="wechat" />
      //图标单色
      <IconFont name="alipay" color="green" />
      //图标多色
      <IconFont name="alipay" color={['green', 'orange']} />
    </div>
  );
};

2、使用单个图标。这样可以避免没用到的图标也打包进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、更新图标

只需更改配置symbol_url，然后再次执行npx iconfont-h5即可生成最新的图标组件

# 修改 symbol_url 配置后执行：
npx iconfont-h5