← 返回首页
技术 2026年5月17日 · 1 分钟阅读 · 大可

内联 SVG 图标与 symbol sprite

用 SVG sprite 一次性注入图标,避免重复请求,颜色随 currentColor 变化。


网站图标用图片会有额外请求、还不吃主题色。SVG 是更优解,尤其 symbol sprite 方案。

定义一次,随处引用

在页面放一个隐藏的 svg,内含多个 <symbol>

<svg style="display:none">
  <symbol id="i-star" viewBox="0 0 24 24">
    <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/>
  </symbol>
</svg>

使用时:

<svg><use href="#i-star"></use></svg>

颜色跟随文字

SVG 路径填 fill="currentColor",图标就能随 CSS 的 color 变化,主题切换时自动适配,无需多套图。 B2 里的社交图标、分类图标都适合这么做。

#SVG#图标#性能