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

从最开始的使用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建立图标系统完整指南