微信小程序使用阿里彩色图标

安装插件 mini-program-iconfont-cli

命令

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

输出

1
2
3
$ npm install mini-program-iconfont-cli --save-dev
+ mini-program-iconfont-cli@0.6.0
added 27 packages from 64 contributors in 2.486s

生成配置文件

命令

1
npx iconfont-init

输出

1
2
$ npx iconfont-init
File "iconfont.json" is created now. We recommend you add it to version control.

此时插件会在项目根目录下生成配置文件 iconfont.json，内容如下：

1
2
3
4
5
6
7
{
"symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
"save_dir": "./iconfont",
"use_rpx": false,
"trim_icon_prefix": "icon",
"default_icon_size": 18
}

我们需要将 symbol_url 的值修改为图标官网给的 Symbol 链接；

微信小程序使用阿里彩色图标

生成图标

命令：

1
npx iconfont-wechat

输出：

1
2
3
4
5
6
$ npx iconfont-wechat
Fetching iconfont data...
√ Generated icon "iconweixin"


√ All icons have been putted into dir: ./iconfont

图标使用

  1. 在 页面 .json 文件中引用组件，注意 iconfont 组件路径；

1
2
3
"usingComponents":{
    "iconfont":"/iconfont/iconfont"
  },

  1. 在页面中使用

1
<iconfontname="iconweixin"size="26"/>

以上是 微信小程序使用阿里彩色图标 的全部内容， 来源链接： utcz.com/a/131696.html

回到顶部