1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序之阿里图标库icon的symbol使用方式

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

时间:2020-10-15 02:05:15

相关推荐

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。