一、spring技术
1.1,传统的spring,图标图形整合在一起,实际呈现的时候准确显示特定图标。
1.2,这里所说的Sprite技术,没错,类似于CSS中的Sprite技术。
二、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
六、效果
七、欢迎交流指正,评论留言。