标签 小程序 下的文章

微信小程序的 WXML 目前(2025.07)是不支持 <svg> 标签的,所以没办法直接使用 Lucide 这一类的图标,但小程序提供了 <image> 标签,是支持 SVG 格式的,但!直接用 <image> 引入 SVG 就没办法自定义颜色了。

有解决方案吗?有的,因为 <image> 是支持 base64 格式的,那我们动态创建 SVG 图标即可。

怎么动态创建呢,把图标的 SVG 字符串中的颜色熟悉(stroke)提取出来,将整个 SVG 字符串作为图标模板,然后用字符串的 replace() 替换即可。

本文的代码是 React + Taro,其他框架的思路是一样的,只是写法略有差异。这里需要用到 js-base64 这个库,记得先 npm 安装一下。

以 Lucide 的 book 图标为例,它的 SVG 是这样的:

- 阅读剩余部分 -