微信小程序使用彩色图标（阿里巴巴矢量图标库）（炒鸡详细）
前言废话
本来一直都是用的阿里巴巴矢量图标库中的单色图标，那样就简单，把素材代码文件下载一下，再复制到项目文件里就行了。可是前几天突然有个需求是用彩蛇图标当用户的头像，我以为按照原来的操作可行，结果原来可可爱爱的图标变成了一个黑色圆点。这可愁死我了，于是马上问度娘，原来是要下载插件，最后顺利的完成了需求。现在有空了就来整理一下操作顺序，希望能帮到像我几天前那样的小伙伴。
配置环境变量
如果已经安装过nodejs的小伙伴自动跳过
第一步，下载安装nodejs
1、下载
我的电脑是windows10 64位的
2、安装
自己设置安装路径
这一步也直接next
打完√直接next
点击下载
完成安装
这个是自动弹出的，关了就行
3、新建插件安装位置
在安装的文件夹里新建node_cache和node_global，如果有了就不用新建了。
打开cmd命令窗口，输入 npm config set prefix "D:\nodejs\node_global"运行，然后再输入npm config set cache "D:\nodejs\node_cache"运行
4、环境变量配置
打开此电脑的属性
进入环境变量
设置系统变量，选择新建一个
设置用户变量
5、点击windows+R键输入node -v和npm -v查看安装好的版本
到这里我们的环境就配好了，可以去下载插件了。
安装插件
在项目的根目录打开命令窗口
输入npm install mini-program-iconfont-cli --save-dev
如下图所示就是OK了
生成配置文件
输入npx iconfont-init
这时候我们可以看到项目的根目录里出现了一个inconfont.json文件
symbol_url 复制图标官网给你的项目的Symbol链接
trim_icon_prefix，图标前缀省略，我们可以设置为“icon-”
生成小程序组件
图标的使用
在app.json文件里设置全局图标组件
"usingComponents":{
"iconfont":"/iconfont/iconfont"
},
<iconfont name="youzi-"></iconfont>
小图标就可以出来了
更改图标尺寸
更新项目图标
当你的项目图标更新了，你只需要更新你的Symbol链接，然后在iconfont.json里修改参数symbol_url，然后再执行一次
npx iconfont-wechat
听说看完点赞、评论、收藏的小伙伴都拿到了大公司的offer了呢
本文地址：https://blog.csdn.net/mycocoo/article/details/107881937