Sharing1 -- 2017我们该如何用icons(SVG)在项目中
Sharing这个系列是我在公司的一些技术分享，现在的项目中有很多使用icons的方式，哪种方式最灵活，使用最简单，消耗资源最少，扩展最方便。我们在最近的一个项目中用到了symbol，我觉得比较符合这些要求。
我只是搬运工，除了项目中的几位大神需要感谢之外，用到的一些文章链接如下：
言归正传，Sharing现在开始。。。
1.相比png而言，SVG的优势
1）SVG是矢量图形文件，可以随意改变大小，而不影响图标质量。
2）可以用CSS样式来自由定义图标颜色，比如颜色/尺寸等效果。
3）所有的SVG可以全部在一个文件中，节省HTTP请求。
4）使用SMIL、CSS或者是javascript可以制作充满灵性的交互动画效果。
5）由于SVG也是一种XML节点的文件，所以可以使用gzip的方式把文件压缩到很小。
2.在web开发中，SVG主要有下面几种使用方法
1）使用img和object标签直接引用svg。这种方法的缺点主要在于要求每个图标都单独保存成一个SVG文件，
使用时也是单独请求的，增加了HTTP请求。
2）Inline SVG，直接把SVG写入 HTML 中，这种方法简单直接，而且具有非常好的可调性。
Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。
但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
3）SVG Sprite。这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。
图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已。
4）使用svg中的<symbol>元素来制作icon。
3.我的一点理解：合并简单，调用简单，查找简单
下面是一个完整的svg-symbol的写法
HTML:
...
<body>
//2.调用简单，注意svg-symbol要hidden，这样DOM tree就不会render了，提高性能
<div id="svg-symbol" class="hidden"></div>
<div>svg symbol demo:</div>
<svg class="icon icon-spades"><use xlink:href="#icon-spades"></use></svg>
<svg class="icon icon-clubs"><use xlink:href="#icon-clubs"></use></svg>
//2.调用简单，tag <use>通过id去映射，可以多次调用，这个id在symbol.html中对应
<svg class="icon icon-diamonds"><use xlink:href="#icon-diamonds"></use></svg>
<svg class="icon icon-diamonds"><use xlink:href="#icon-diamonds"></use></svg>
<svg class="icon icon-diamonds"><use xlink:href="#icon-diamonds"></use></svg>
<svg class="icon icon-IE"><use xlink:href="#icon-IE"></use></svg>
<svg class="icon icon-camera"><use xlink:href="#icon-camera"></use></svg>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
...
==============================================================================
test.js
...
// 2.调用简单，返回的html直接查到#svg-symbol的tag中
$.ajax({
// 1.合并简单，写在一个html里面，到专用网站查找，用多少加多少
// https://icomoon.io/app/#/select
url: './symbol/symbol.html',
type: 'POST',
dataType: 'html'
})
.done(function(data) {
$('#svg-symbol').append(data);
})
.fail(function() {
console.log("error");
})
...
==============================================================================
symbol.html
//3.大量引用svg icon，最好下载对应的demo文件，方便以后用id进行查找
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-spades" viewBox="0 0 32 32">
<title>spades</title>
<path class="path1" d="M25.549 10.88c-6.049-4.496-8.133-8.094-9.549-10.88v0c-0 0-0-0-0-0v0c-1.415 2.785-3.5 6.384-9.549 10.88-10.314 7.665-0.606 18.365 7.93 12.476-0.556 3.654-2.454 6.318-4.381 7.465v1.179h12.001v-1.179c-1.928-1.147-3.825-3.811-4.382-7.465 8.535 5.889 18.244-4.811 7.93-12.476z"></path>
</symbol>
//2.调用简单，tag <use>通过id去映射，可以多次调用，这个id在symbol.html中对应
<symbol id="icon-diamonds" viewBox="0 0 32 32">
<title>diamonds</title>
<path class="path1" d="M16 0l-10 16 10 16 10-16z"></path>
</symbol>
...
</svg>