微信小程序之阿里图标库icon的symbol使用方式

近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理。
但是压缩处理之后效果也没有很显著，而且再次进行压缩还需要收费。
最近研究了阿里巴巴矢量图标库的symbol使用方法。

把图标都放进一个项目 点击symbol生成地址

优势

1. 支持多色图标了，不再受单色限制。
2. 标签自带size属性，也可以通过css调整样式（使用过程中，在电脑上打开微信小程序，样式会有偏）。不过不影响手机端使用。

使用步骤

1.到你的根目录，鼠标右键，打开终端，输入 npm init -y（会多一个package.json文件）
2.输入npm install mini-program-iconfont-cli --save-dev（会多一个node_modules，不会被上传）
3.输入npx iconfont init 会出现help提示
4.输入npx iconfont-wechat（会多一个iconfont.json）

5.配置iconfont.json文件，路径就是一开始项目选择的symbol的路径（以下报错代表路径错误，每次更新项目icon都需要重新获取路径）

5.页面使用

page里的json文件引用组件

wxml文件里使用组件

icon名字在iconfont文件夹里有写，阿里图标库项目组里的icon编辑里面也有显示和修改功能

实际大小，还是比之前小了很多！！！