页面重构中的图标方法

对于图标使用,当前用得最多的还是雪碧图和iconfont的方法吧, 另外还有将小图转为base64直接引入到css文件,逐渐流行的还有svg图标。

sprite 雪碧图

而雪碧图的用法又有多种,我们现在用得比较多的是类似gopng 这种半自动的用法(结合scss,又有些小技巧),还有我们使用gulp后,留意到有更方便快捷的全自动式用法(gulp sprite)。

iconfont 图标字体

iconfont的用法也有多种,最常用的肯定是在iconfont.cn来生成处理,但个人觉得这里不好维护。后留意到http://fontello.com/ 这个站点,觉得会更好用一些。然后最新发觉icomoon 除了处理SVG,生成iconfont也是挺赞的,值得一试。

base64图片

gulp其实有插件直接将放在对应css引用的图片转为base64,你可配置任务时设定例如小于2KB的图都执行这个操作。另外也可以手动用在线的一些站点要转换。

SVG图标

关于svg图标也是有不同的用法的,例如直接引入svg图片,把图标整合到1个svg文件,再直接加载到页面,或是通过js引入,然后通过ID来调用。成单APP有开始使用这个方法。

还有一种用法是类似base64用法的,也是本文想要特别介绍的。

用法很简单,如下就可以作为背景图

background-image: url(‘data:image/svg+xml;utf8, … ‘);

当然也可以在html以img引入

<img src=”data:image/svg+xml;utf8,…” />

也可用加到css伪类。

优点:比base64图小得多,矢量图不失真!
缺点:如果是作为背景图,不能用样式控制填充色(fill), 这点没有SVG图标的用法灵活…
总的来说,这个用法还是挺有意思的,目前在企业理财H5使用,未知有没特别兼容性问题。