阿里 Symbol 图标的使用

图标的引用在项目开发中是一个不可避免的一个问题。然而并不是所有的项目都可以很顺利的引入图标库，例如在微信小程序开发中想要引入阿里图标库中的多色图标。而按照阿里图标库中给出的常规的引入流程就不能达到要求，总会报错。

在阿里图标库中只有 Symbol 类型的图标才支持多色 0-1.png

因此只有在项目中引入阿里 Symbol 类型的图标才能够实现开发需求。

而引入阿里 Symbol 类型的图标官方给出的引用方式最终需要使用 svg 标签 0-2.png

而微信小程序目前还不能编译 svg 标签，因此在微信小程序中无法使用常规方式引用阿里 Symbol 类型的图标。

因此想要在微信小程序中使用阿里 Symbol 类型的图标只能另辟蹊径，不能再使用阿里给出的常规的引入方法。

在阐述新的引入方法之前，先阐述一下项目背景：
我目前在用的是 Taro 3.x ，通过 taro 3.x 开发微信小程序，因此我将根据 taro 项目详细描述引入流程
注意：在 小程序、React Natice、React H5、Flutter 项目中均适用。

步骤一：在 github 查询依赖 mini-program-iconfont-cli 包

在 mini-program-iconfont-cli 中最后扩展中有提到taro-iconfont-cli

1-1.png

可以根据自己的项目选择适合自己的库。

步骤二：进入 taro-iconfont-cli 库中，按照 github 中的步骤操作

1.安装 taro-iconfont-cli 执行如下命令

npm install taro-iconfont-cli --save-dev

2.创建 iconfont.json 配置文件，执行如下命令

npx iconfont-init --output iconfont.json 
//  output 可以跟一个路径，将 iconfont.json 配置文件放在你想放在的路径中。
//  自动生成的  iconfont.json  中的每个配置项的作用详情看 taro-iconfont-cli 库的 github

3.将阿里图标库中 Symbol 类型的 js 文件资源地址作为 iconfont.json 配置文件中 “symbol_url” 字段的值。

2-1.png
4.生成标准组件，执行如下命令

npx iconfont-taro  // 将会生成 Taro 标准组件

5.在 src/app.config.js下填写一次 usingComponents。

2-2.png
6.使用图标测试自己引入成功。
2-3.png

步骤三：当图标引入成功后，如果开发或维护过程中修改了阿里图标库。

这时需要更新项目内的 js 资源文件的绝对路径，以及需要重新执行 步骤二中的第 ”4、生成标准组件“ 步骤。
（即：再次将步骤二中的 第2，第3 步骤执行一次即可）