微信小程序之阿里图标库icon的symbol引入无需下载支持彩色图标

创建项目，将需要的图标加入项目中

symbol方式引入优势

1. 支持多色图标了，不再受单色限制。
2. 标签自带size属性，也可以通过css调整样式（使用过程中，在电脑上打开微信小程序，样式会有偏）。不过不影响手机端使用。

使用步骤

1.微信小程序开发工具，项目的根目录，鼠标右键，打开终端，输入 npm init -y（会多一个package.json文件）
2.输入npm install mini-program-iconfont-cli --save-dev（会多一个node_modules，不会被上传）
3.输入npx iconfont-init 会出现help提示

此时插件会在项目根目录下生成配置文件 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 链接；

4.生成图标，输入npx iconfont-wechat

执行完成后，在项目根目录会生成iconfont图标目录

 图标的使用

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

 

2.在页面中使用

 name为图标名称，参考iconfont.wxml中的图标name配置