姿势一: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 后本地渲染)。

