跳到主要内容
网站首页

图标库

返回使用指南
微信小程序前端SVG

在微信小程序里正确使用 SVG 图标

5 分钟读完 · 更新于 2026-02-20

姿势一:image 组件 + base64(推荐,单图标)

小程序的 <image> 组件可以渲染 base64 编码的 DataURI:把 SVG 源码用本站工具箱的「Base64 / DataURI」面板转成 data:image/svg+xml;base64,... 字符串,直接放进 image 的 src。

优点是每个图标独立、改色只需重新编码;缺点是字符串较长,适合数量不多、颜色固定的场景。

TIP转 base64 前先用 SVG 工具箱压缩一次(SVGO),图标源码普遍能小 30% 以上,base64 体积同步缩小。

姿势二:background-image(推荐,大量复用)

在 wxss 里写 .icon-cloud { background-image: url("data:image/svg+xml,..."); },配合固定宽高的 view 复用。URL 编码版(utf8 DataURI)比 base64 更小,注意把 # 转义成 %23。

如果需要运行时换色,把 SVG 里 fill 改为 currentColor 并用 CSS mask + background-color 方案:-webkit-mask-image: url(...) 后,background-color 即图标色。

姿势三:合成字体(几十个以上图标)

图标数量超过 30 个时,逐个内联会让包体积失控。用字体生成器把整批 SVG 合成一个 iconfont(WOFF2),在 wxss 里用 font-family 引用,一个类名一个图标,与 Web 端 iconfont 用法完全一致。

记得只在字体文件里保留实际用到的字符集(生成器支持自定义保留字符),能再省一半体积。

主包体积红线

小程序主包限制 2MB,图标资产建议:单色图标走字体或 mask;品牌彩色 logo 少量 base64;超过主包预算就放分包或 CDN(downloadFile 后本地渲染)。

Command Palette

Search for a command to run...