阿里iconfont（SVG symbols方法）

SVG symbol Element

前端开发经常会用到一些图标，比较常用的一种方式就是使用阿里图标库iconfont来生成图标
iconfont

一共有三种引入方式供选择：SVG Symbol、Unicode及Font class。一般推荐使用SVG Symbol方式引入。

SVG symbol方法是预先加载符号，在适合的地方引入并渲染为矢量图形

特点

• 支持多色图标，不再受单色限制
• 支持像字体那样通过font-size，color来调整样式
• 支持ie9+
• 可以利用css实现动画
• 减少HTTP请求

引入步骤

1. 登录iconfont，搜索我们需要的图标库，加入购物车
2. 选取所有我们需要的图标后，点击购物车图标，然后点击“添加至项目”
   
   
3. 生成引用
   点击symbol方式，复制引用js代码（你的项目中一旦有新图标加入，该代码就会进行更新）
   
4. 将生成的symbol代码引入项目，并可以加入其通用的css代码，就可以在HTML里面使用了

<script src="//at.alicdn.com/t/font_2234828_qema01fxl7.js"></script>

.icon {width: 50px; height: 50px;}

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-008-tuihuo"></use>
</svg>

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

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

SVG Sprites

详情参见张鑫旭：SVG Sprites技术介绍， 使用SVG symbols建立图标系统