H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

安装插件 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
<iconfont name="iconweixin" size="26"/>

本文地址:H5W3 » 微信小程序使用阿里彩色图标

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址