阿里图标 Symbol 多色图标引用，在uniapp中真机上无法正常显示。

uniapp真机运行报错：

reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: Cannot set property ‘_iconfont_svg_string_5058005’ of undefined
at (app-service.js:168:61962)
at (app-service.js:198:127159)

1.安装 iconfont-tools 工具

• 打开win + R 输入cmd 输入：pnpm install -g iconfont-tools 命令全局安装 iconfont-tools
• 安装成功后，你可以在任何目录下使用iconfont-tools命令
• 没有pnpm的可以使用npm,只要能安装就行

2.转换图标文件

• 在终端中，切换到你刚刚解压的图标文件夹目录下。可以直接在下载的文件夹中输入cmd
• 执行转换命令：iconfont-tools
  

3.执行后，工具会提示你进行一些设置（可直接回车使用默认值）：

• 设置输出文件夹名称‌：例如输入 iconfont-weapp。‌
• 设置输出文件css文件名称‌：例如输入 iconfont-weapp-icon。‌
• 设置css文件的prefix‌：这是使用图标时的CSS类名前缀，例如默认的t-icon。‌
• 完成设置后，工具会在当前文件夹下生成一个指定名称的文件夹（如iconfont-weapp），里面包 含转换后的CSS文件（如iconfont-weapp-icon.css）。‌
  ‌

执行结果：

4.在uni-app项目中引入

将生成的iconfont-weapp文件夹（或其中的CSS文件）复制到你的uni-app项目的static目录下。‌

在项目的全局入口文件（通常是App.vue或main.js）中全局引入该CSS文件

‌注意‌：如果使用的是SCSS，可能需要将CSS文件后缀改为.scss并相应调整引入路径。‌

二选一即可

在App.vue中引入

在main.js中引入

// 引入转换后的图标样式文件
import ‘./static/iconfont-weapp/iconfont-weapp-icon.scss’

实际使用的代码

<view :class="['t-icon', `t-icon-${item.icon.replace('icon-', '')}`]"></view>	   

从阿里下载下来的图表名称带有icon前缀，所以替换了，这个根据具体使用来

总结：阿里下载下来的多色图标，使用Symbol在uniapp无法正常显示，只能在H5上显示，如果需要在手机上显示就需要安装 iconfont-tools 进行一个转换