让 uniapp 小程序支持多色图标 icon：iconfont-tools-cli

前景：

uniapp 开发小程序项目时，对于 iconfont 多色图标无法直接支持；若将多色 icon 下载引入项目则必须关注包体，若将图标放在 oss 或者哪里管理，加载又是一个问题，因此大多采用 iconfont-tools 工具，但是 iconfont-tools 使用需要下载 iconfont-tools 工程进行编译转换，过于繁琐，因此我在 iconfont-tools 工具的基础上进行了改造: iconfont-tools-cli: yarn 安装，配置，项目正常启动或打包直接执行编译。

基于 iconfont-tools 的改造工具：iconfont-tools-cli

安装

yarn add iconfont-tools-cli

配置

1. 在项目根目录创建配置文件：config/iconfont.config.js

module.exports = {  iconfontUrl: '//at.alicdn.com/t/c/font_xxxxxx.js', // 矢量图标库Symbol地址  dirName: 'iconfont', // 需要生成的css对应文件夹  fileName: 'anterpm-symbol', // css文件名称  icon: 'anterpm-symbol', // Font Family  fontSize: '16px', // 默认大小};

1. package.json 中配置命令

"update:iconfont": "node node_modules/iconfont-tools-cli/lib/cli.js --config config/iconfont.config.js --to $INIT_CWD/src/static/css",

命令中：

config/iconfont.config.js 就是根目录下编译需要使用的配置文件

--to $INIT_CWD/src/static/css：就是需要生成到对应位置/文件夹

1. 将编译/更新命令配置到项目启动或打包中去

4. 项目启动/打包后，会看到生成的 css 文件，并将其引入 App.vue 文件中

注：iconfont-tools 实现方式是通过 background-image 实现多色图标的展示，因此需要注意在使用时，需要时块级或者行内块的标签；