安装插件 mini-program-iconfont-cli

命令

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

输出

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

生成配置文件

命令

npx iconfont-init

输出

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

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

{
    "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 链接；

生成图标

命令：

npx iconfont-wechat

输出：

$ npx iconfont-wechat
Fetching iconfont data...
√ Generated icon "iconweixin"


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

图标使用

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

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

2. 在页面中使用

<iconfont name="iconweixin" size="26"/>