【Web技术】1033- 如何优雅的在微信小程序使用 SVG 字体图标

本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞????收藏支持一下啦。

最近在重构一个项目，主要是做 H5 端和小程序端，这次打算开始多做总结啦，之前已经总结一篇《如何优雅的管理 HTTP 请求和响应拦截器？》 。

如果大家还有其他方案，欢迎一起探讨哈~ 喜欢本文的朋友给个赞????鼓励一下哈~

一、需求思考和方案设计

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

1. 问题分析

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

这里先按照 iconfont 的规则看看单色图标和多色图标使用上的区别：

单色图标的使用

单色图标使用起来比较简单（以 font-class 引用为例），只需要 2 个步骤：

• 第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

• 第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

多色图标的使用

多色图标使用起来也很简单（以 symbol 引用为例），只需要 3 个步骤：

• 第一步：拷贝项目下面生成的symbol代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

• 第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

• 第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

这两种图标在使用上都非常方便，那大家是不是会好奇，我们写本文的目的？

原因是，「微信小程序上不支持 SVG 字体图标！???? 而多色图标，是需要借助 SVG 标签来实现。」

于是我在小程序文档找了好久，也只看到了 <Image> 组件能够使用 SVG，介绍如下：

image图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

其属性 src 的值为图片资源地址，这就意味着，不能使用 SVG 字体图标了。因此我们需要想想变通的办法。

（这里不讨论将 iconfont 上图标下载为图片来引用的情况）

2. 方案设计

既然我们了解了单色图标和多色图标的使用方式：

• 单色图标：任意标签（如 div 标签） + 对应字体图标 class 名称

• 多色图标：使用 svg 标签 + use 标签设置 xlink:href 属性

首先马上想到的是，能不能集合两者使用方式，实现任意标签通过 class 名称来使用多色图标？

答案是可以的，只需要对图标文件进行格式转换，即 「将多色字体图标转换为能通过class名称来引用的字体图标文件」 。

那接下来只要看看如何实现格式转换即可。

二、重构后的效果

这边我以其中一个页面进行重构，最后将单色图标全都换成新的多色 SVG 字体图标，效果如下：