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

时间:2023-03-09 07:36:13
微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)

前提

需要安装好 nodejs (略)

用于下载插件

安装插件

npm install mini-program-iconfont-cli --save-dev

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

初始化配置文件

npx iconfont-init

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

会生成一个 inconfont.json 文件

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

填入给你的 Symbol 链接

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

生成小程序组件

npx iconfont-wechat

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

使用图标

在 app.json 文件里设置使用图标组件

"usingComponents": {
"iconfont": "/iconfont/iconfont"
}

在 wxml 中使用

<iconfont name="dog"></iconfont>

如图:

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

更改图标大小

iconfont.wxml 中可以随意修改,每次找有点麻烦

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

也不建议你去修改 iconfont.js 里的 svgSize 的大小

可以修改 iconfont.jsondefault_icon_size 的值

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

然后更新一下 iconfont-wechat 就可以设置图标全局的大小了

npx iconfont-wechat

项目更新图标

当你的项目图标更新了,需要更新你的 Symbol 链接,然后在 iconfont.json 里修改参数 symbol_url

然后更新一下 iconfont-wechat 就可以了

npx iconfont-wechat

The_End