阿里图标库icon的symbol在微信小程序中的使用方式

使用symbol的优点：

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

一. 在iconfont网站 生成symbol代码

1. 选中需要用的图标，点击加入购物车。选好所有想要使用的图标之后，点击右上角购物车图标
   image.png

2. 点击添加至项目

   
   image.png

3. 选择项目，点击确定。这里我添加到test项目。

   
   image.png

4. 点击中间红字标识，因为之前已经生成过，所以我这里显示的更新。

   
   image.png

5. 点击Symbol, 复制生成的地址。

   
   image.png

二. 使用步骤

1. 在项目根目录，鼠标右键，打开终端，输入 npm init -y
2. 安装插件: npm install mini-program-iconfont-cli --save-dev
3. 输入npx iconfont init 生成iconfont.json文件
   image.png
4. 配置iconfont.json文件，路径就是之前生成的symbol的路径

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

5. 输入npx iconfont-wechat
   可以看到自己的根目录中生成了iconfont目录。
6. 注册iconfont组件并使用。
   在app.json中配置：

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

在页面中使用：

<iconfont size="36" name="badanmu"></iconfont>