React + Taro 实现微信小程序使用 SVG 图标并自定义颜色
微信小程序的 WXML 目前(2025.07)是不支持 <svg>
标签的,所以没办法直接使用 Lucide 这一类的图标,但小程序提供了 <image>
标签,是支持 SVG 格式的,但!直接用 <image>
引入 SVG 就没办法自定义颜色了。
有解决方案吗?有的,因为 <image>
是支持 base64
格式的,那我们动态创建 SVG 图标即可。
怎么动态创建呢,把图标的 SVG
字符串中的颜色熟悉(stroke
)提取出来,将整个 SVG 字符串作为图标模板,然后用字符串的 replace()
替换即可。
本文的代码是 React + Taro,其他框架的思路是一样的,只是写法略有差异。这里需要用到 js-base64
这个库,记得先 npm
安装一下。
以 Lucide 的 book
图标为例,它的 SVG 是这样的: