使用SVG-symbols建立图标系统完整指南

jiezi

5 年前

从最开始的使用 img 图片，到后来的使用 css sprite 来减少服务器请求，再到流行的图形字体化图标 Iconfont。现在，一种全新的图标使用方式开始流行了起来——SVG symbols 图标。

SVG symbols 的工作原理：symbol 元素用来定义一个图形模板对象，它可以用一个 use 元素实例化。

symbol 元素对图形的作用是在同一文档中多次使用，symbol 元素本身是不呈现的。只有 symbol 元素的实例（亦即，一个引用了 symbol 的 use 元素）才能呈现：

<svg>
  <symbol viewBox="0 0 24 24" id="heart">
    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
    </path>
  </symbol>
  <symbol viewBox="0 0 32 32" id="arrow">
    <path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z">
    </path>
  </symbol>
</svg>

这段代码使用 SVG symbols 定义了两个图标，每个 symbol 元素定义一个图标，图标 id 分别是 heart 和 arrow，将其放在 html 文件的 body 元素内。

通过以下代码引用 id 为 heart 的图标：

<svg>
    <use xlink:href="#heart"/>
</svg>

xlink:href 属性值就是‘#’加 symbol 的 id 名称，那么只需改变这个属性值就可以引用不同的图标。

更多内容请查看原文：使用 SVG symbols 建立图标系统完整指南

工作原理

自动化处理