怎么在微信小程序里使用 SVG 字体图标

1. 1. 问题分析
• 单色图标的使用
• 多色图标的使用
2. 2. 方案设计

本文介绍的项目是使用 Taro框架进行多端开发，目前主要适配 H5 端和微信小程序端。项目使用的字体图标库内部维护，目前托管在 iconfont 上。

1. 问题分析

最近在重构的项目比较古老（其实也就去年的），项目中使用到的图标早已更新 N 个迭代了，已经由单色图标更新到多色图标！

使用字体图标

按照文档使用方法，使用的时候，只需要引入 IconFont 组件，通过 name 名称来选择对应图标即可：

// 省略其他代码

import IconFont from '@components/Iconfont/index';

<IconFont name="exe-knowledge-ppt"></IconFont>

按照文档提示，还有更多使用方法：

// 原色彩
<IconFont name="alipay" />

// 单色：红色
<IconFont name="alipay" color="red" />

// 多色：红色+橘色
<IconFont name="alipay" color={['red', 'orange']} size={300} />

// 不同格式的颜色写法
<IconFont name="alipay" color={['#333', 'rgb(50, 124, 39)']} />

// 与文字对齐
<View style={{ display: 'flex', alignItems: 'center' }}>
  <Text>Hello</text>
  <IconFont name="alipay" />
</View>

踩坑记录

1. 字体大小设置问题

由于通过这种方式导出的图标，是个单独组件，使用时如果需要设置图标大小，需要通过设置其 width和height属性进行设置。

通过 font-size属性无法设置字体图标的大小。

方案对比和选择

这次只尝试了这两种方案，都能顺利完成需求。如果大家有其他方案，欢迎一起评论区讨论~

接下来以生成下面相同 20 个多色图标为标准，分析这两种方案。

先看看对比结果：

分析每个项目：

1. 对比生成难易程度

• 「手动转换图标文件」需要每次将图标单独下载，再进行打包，当图标数量较多，其工作量就较大。
• 「taro-iconfont-cli」只需设置字体图标库地址，自动下载并生成组件，较为方便。

2. 对比使用难易程度

两者使用起来都比较简单：

• 「手动转换图标文件」为元素添加 class 名称即可。
• 「taro-iconfont-cli」为元素添加 name 属性。

3. 对比资源占用情况

资源占用差异就很大了，分析下原因：

• 「手动转换图标文件」是将图标重新打包，最后生成的都是 base64 编码的内容，相对较小。
• 「taro-iconfont-cli」是为每个图标生成一个组件，单独一个文件，还有附加各个平台的文件，因此较大。

4. 选择方案

考虑到目前项目所使用的字体图标比较少（20 个以内），后续开发人员上手难度问题，我最终使用「taro-iconfont-cli」这套方案。
虽然这个方案生成的组件资源占用会稍大，但是目前使用图标较少，并且可以通过打包工具、CDN 等常用优化方式进行优化。

总结

本文通过一次简单的项目重构，总结项目中小程序使用 SVG 多色图标的方案，目的是为了实现在小程序中能够正常使用 SVG 多色图标，并且也为内容越来越多独立站点的项目积累经验，毕竟各个项目具有相关性。

作者：pingan8787