今天在看项目的时候，出现了这么一行代码，想了半天也不太明白，废话不多说，上代码：
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-quqian"></use></svg>
image.png
然后就百度了一下，不过感觉说的都不太明白，但自己又非常想搞清楚，就查了很多资料，终于明白了。
它的原理就是利用了SVG symbols建立图标，然后通过<use>标签使用，下面具体说一下：
<symbol>元素用来对元素进行分组；它不会被直接显示，大概相当于定义一个模板，然后使用<use>元素引用并进行渲染。
单个图标的建立：
<body>
<svg style="display: none;">//因为即使<symbol>本身没有显示，但是包裹它的<svg>元素依旧会渲染并占用一些页面空间
<symbol viewBox="0 0 24 24" id="heart">//viewBox属性定义了图标的宽高比，前两个一般为0,0,后面为SVG的宽和高
<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>
</svg>
<svg>
<use xlink:href="#heart"/> //使用xlink:href属性来指定你想要展示哪一组图标，这里，我们要展示的是id为#heart的<symbol>元素。
</svg>
</body>
结果如下：
image.png
接下来就可以建立自己的SVG sprite了，就是图标库。
<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>
//这里可以放很多个<symbol>个图标，注意给<symbol>元素都设置一个id，这个id用来在后面使用<use>的时候引用
</svg>
我们的SVG sprite现在可以投入使用了。你可以保存文件为icons.svg，放在资源文件夹中（根据自己习惯，这里以img为例）。
页面中哪里要用直接插入以下一段：
<svg>
<use xlink:href="img/myicons.svg#heart"/>
</svg>
如果想给图标加颜色或者其他属性，只需要给<svg>指定一个class即可
<svg class="icon my-class-name">
<use xlink:href="img/myicons.svg#heart"></use>
<svg>
在IE中通过<use>引用外部SVG文件的方法是不可行的，IE9以上也不行（不过，这个问题在Edge中已经解决了）
第一种：
我们可以在文档的顶部引入SVG sprite，然后使用<use>标签引用图标
<svg style="display: none;"> <!-- this is our svg sprite -->
<symbol viewBox="0 0 24 24" id="heart">
<path 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">
<!-- ... -->
</symbol>
</svg>
<svg>
<use xlink:href="#heart"/> <!-- this is our visible icon -->
</svg>
第二种：
在Github repo中下载这个polyfill，在文档中引入，就ok了
原理是：这个polyfill可以根据<use>元素的引用，获取外部SVG资源中的id，而浏览器本身并不能这样做。基本远离就是，这个polyfill遍历文档中的<use>元素，然后如果它引用的是浏览器无法加载的外部SVG文件，它就在外部SVG中抓取并预置到文档中的<body>中。
原文: http://www.w3cplus.com/svg/how-to-create-an-icon-system-using-svg-symbols.html ? w3cplus.com
