微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)

前提

需要安装好 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