字体图标icon

浅谈SVG Sprite

2016/03/06 · HTML5 ·
SVG

原文出处:
携程设计委员会   

随着前端技术的发展,有越来越多的方法实现icon的制作,同时为了满足市面上各种大屏幕分辨率,字体图标icon
font应运而生,字体图标的制作也是一种全新的设计方式,但是icon font
在windows系统下,字体较小时,锯齿问题比较严重,那么今天要讲的svg
sprite,不仅可以随意改变图标大小不会产生锯齿,还能随心所欲的填充颜色。

下面来来介绍一下矢量图形SVG Sprite在页面中的应用。

第一步:制作SVG图标
首先的准备一套SVG图标,我们直接到icomoon.io上下载。

1.选中图标

图片 1

2.点击Generate

图片 2

3.下载

图片 3

然后我们可以在解压文件中,找到对应的svg图标文件夹。

图片 4
图片 5

第二步:合并SVG图标
准备好svg图标后,我们需要把多个svg图标整合到一个svg文件中。
这里需要用到自动化合并工具(grunt),grunt有个名为svgstore的插件。
关于grunt环境的安装,就不在这阐述 。

环境安装好后,在项目目录下执行下面的命令,安装插件:

图片 6

安装好后,可以看到grunt-svgstore文件夹里有个Gruntfiles.js配置文件。
我们加入以下两段代码:

图片 7

图片 8

了解更多配置项:https://www.npmjs.com/package/grunt-svgstore

配置好以后,我们需要把第一步下载下来的svg图标,放到sprites文件夹中,如下图:

图片 9

到这为止,一切准备就绪,只需进入到 grunt-svgstore目录,执行命令:

图片 10

运行命令后,可以看到成功创建了sprite.svg文件

图片 11

第三步:应用

我们来看下生成文件的源代码:

图片 12

再来看看浏览器里页面的效果~~~

图片 13

到这里svg sprite 图标就已经完成了。

兼容性:

图片 14

对于ie8以下,我们可以添加一个标签,使用css sprite:

为避免其他浏览器加载,可以加上条件注释。

图片 15

这样就完美啦~

 

2 赞 5 收藏
评论

图片 16

发表评论

电子邮件地址不会被公开。 必填项已用*标注