css-spring、svg-spring

一、spring技术

1.1，传统的spring，图标图形整合在一起，实际呈现的时候准确显示特定图标。

1.2，这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。

二、iconfont

iconfont-阿里巴巴矢量图标库

官网了解一下，大致情况就是上传、下载这么简单；

下载后的文件包括这么多，既包括项目常用的css文件，也有我们svp-spring想要的js文件

三、基于iconfont的css-spring/fontclass

3.1，引入css文件

3.2，绑定class

四、基于iconfont的svg-spring/symbol

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，不如png。

4.1，引入js文件

4.2，绑定id

五、svg-spring原理及优势

iconfont的使用方法_cocytus-CSDN博客_iconfont 使用

未来必热：SVG Sprites技术介绍 « 张鑫旭-鑫空间-鑫生活

关键词：svg-spring、svg、symbol、use

六、效果

七、欢迎交流指正，评论留言。