阿里 Symbol 图标的使用

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

在阿里图标库中只有 Symbol 类型的图标才支持多色

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

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

而微信小程序目前还不能编译 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

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

步骤二：进入 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” 字段的值。

4.生成标准组件，执行如下命令

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

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

6.使用图标测试自己引入成功。

步骤三：当图标引入成功后，如果开发或维护过程中修改了阿里图标库。
这时需要更新项目内的 js 资源文件的绝对路径，以及需要重新执行 步骤二中的第 ”4、生成标准组件“ 步骤。
（即：再次将步骤二中的 第2，第3 步骤执行一次即可）

引用自 简书 诗与yuanfang