微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)
2024-08-30 18:30:11
前提
需要安装好 nodejs (略)
用于下载插件
安装插件
npm install mini-program-iconfont-cli --save-dev
初始化配置文件
npx iconfont-init
会生成一个 inconfont.json 文件
填入给你的 Symbol 链接
生成小程序组件
npx iconfont-wechat
使用图标
在 app.json 文件里设置使用图标组件
"usingComponents": {
"iconfont": "/iconfont/iconfont"
}
在 wxml 中使用
<iconfont name="dog"></iconfont>
如图:
更改图标大小
在 iconfont.wxml 中可以随意修改,每次找有点麻烦
也不建议你去修改 iconfont.js 里的 svgSize 的大小
可以修改 iconfont.json 里 default_icon_size 的值
然后更新一下 iconfont-wechat 就可以设置图标全局的大小了
npx iconfont-wechat
项目更新图标
当你的项目图标更新了，需要更新你的 Symbol 链接，然后在 iconfont.json 里修改参数 symbol_url
然后更新一下 iconfont-wechat 就可以了
npx iconfont-wechat
The_End
最新文章
- <JavaScript语言精粹>--<读书笔记三>之replace()与正则
- css 文字溢出隐藏 带省略号
- Baskets of Gold Coins_暴力
- MySql数据库乱码解决方法
- python gui之tkinter界面设计pythonic设计
- FreeMarker 一二事 - 静态模板结合spring展示
- MYSQL注入天书之后记
- Qt之操作数据库（SQLite）
- Plupload文件上传组件使用API
- php中const与define的使用区别 详解
- 【Swift】沙盒缓存
- 利用工具MailUtils实现邮件的发送,遇到的大坑,高能预警!!
- 链表详解（C语言）
- Docker run 命令的使用方法
- Windows驱动中通过MDL实现用户态与核心态共享内存
- eclipse 自动生成json格式的toString()方法
- mysql之使用centos7实现主从复制(读写分离)的实现过程
- autoit获取ie浏览器简单操作网页（GUI小工具）
- iframe与父页面传值
- ghld