前景：
uniapp开发小程序项目时，对于iconfont多色图标无法直接支持；若将多色icon下载引入项目则必须关注包体，若将图标放在oss或者哪里管理，加载又是一个问题，因此大多采用iconfont-tools工具，但是iconfont-tools使用需要下载iconfont-tools工程进行编译转换，过于繁琐，因此我在iconfont-tools工具的基础上进行了改造，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', // 默认大小
};2、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：就是需要生成到对应位置/文件夹
3、将编译/更新命令配置到项目启动或打包中去
4、项目启动/打包后，会看到生成的css文件，并将其引入App.vue文件中
注：iconfont-tools实现方式是通过background-image实现多色图标的展示，因此需要注意在使用时，需要时块级或者行内块的标签；
原文地址:https://blog.csdn.net/qq_42205731/article/details/135712026
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_59680.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
