阿里云icon,阿里icon矢量标

近期开发多角色需求的微信小程序,对于代码包不能超过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编辑里面也有显示和修改功能

实际大小,还是比之前小了很多!!!

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注