近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理。
但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费。
最近研究了阿里巴巴矢量图标库的symbol使用方法。
把图标都放进一个项目 点击symbol生成地址
优势 支持多色图标了,不再受单色限制。标签自带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编辑里面也有显示和修改功能
实际大小,还是比之前小了很多!!!
168飞艇最强技巧多一个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编辑里面也有显示和修改功能
实际大小,还是比之前小了很多!!!