⼩程序使⽤阿⾥图标库Symbol类型彩⾊图标
1、在⼩程序项⽬根⽬录,使⽤npm安装mini-program-iconfont-cli 插件
// Yarn
yarn add mini-program-iconfont-cli --dev
// Npm
npm installmini-program-iconfont-cli --save-dev
2、⽣成iconfont.json配置⽂件
npx iconfont-init
iconfont.json
save_dir:iconfont组件⽣成⽬录
use_rpx:是否使⽤rpx作为⼤⼩单位
default_icon_size:默认icon⼤⼩
symbol_url :是复制iconfont官⽹你的项⽬的Symbol链接
symbol_url 内容
3、⽣成⼩程序组件,注意此操作会清空并替换已有的iconfont⽬录,因此注意备份数据(没有此⽬录可忽略)
npx iconfont-wechat
iconfont组件内容
4、注册iconfont组件并使⽤
可以在app.json⽂件中引⼊全局图标组件,也可以在使⽤图标的页⾯局部引⼊
引⽤组件
icon图标库
5、使⽤组件
在页⾯中使⽤
使⽤icon可能会换⾏,所以可以全局设置iconfont样式为⾏内块级元素
全局设置样式
更新iconfont图标操作
图标库更新图⽚会⽣成新的js,将iconfont.json
symbol_url 内容更换成新的js地址,然后再次执⾏:
iconfont.json⽂件中的symbol_url
npx iconfont-wechat
更新js内容

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。