灵活的 Web 图标

多终端下的图标⽅方案浅析

Ryan @ D.G.Z (GitCafe) @ryaneof

主要的实现⽅方式



<img> <svg>



CSS Sprites Icon Font Pure CSS Icons

需要考虑的点



精确还原 兼容性



加载速度 维护成本

SVG Symbol &

CSS Sprites Fallback

Why SVG

位图 vs ⽮矢量图

万恶的视⺴⽹网膜屏幕 “⼀一夜之间，图⽚片全糊掉了，只有⽮矢量图坚挺着”

位图作为图标的缺陷

图⽚片体积⽆无法控制 2x, 3x 尺⼨寸只是⼀一个⼤大概的估算 不能完美适应所有的像素密度

放⼤大：颜⾊色近似选取，图⽚片模糊 缩⼩小：减少像素取样，资源浪费

设计师：图标本来就应该是⽮矢量的

⽮矢量图形

Pure CSS Icons Icon Font SVG

Pure CSS Icons

精确还原 √ 加载速度 √ 兼容性 X 维护成本 X

Icon Font

精确还原 √ 加载速度 √ 兼容性 √ 维护成本 X

似乎是⼀一个靠谱的⽅方法

Icon Font 定位问题

会受到浏览器对字体渲染的影响

line-height, vertical-align, letter-spacing, word-spacing, text-rendering 边缘不够锋利，伪元素盒模型不精确，各浏览器渲染的字重不同

会受到字符本⾝身设计的影响

留⽩白，字符本⾝身的⾼高度，宽度

Icon Font 加载问题 会受到⺴⽹网络状况影响，显⽰示 Fallback 字体

Icon Font 其他问题

Unicode 字符冲突 额外的⼯工作：字体编辑 颜⾊色单⼀一，交互效果有限 不完全的浏览器兼容性 困难的 fallback 检测

Icon Font

Scalable Vector Graphics



可缩放的



⽮矢量



图形

SVG

精确还原 √ 加载速度 √ 兼容性 X 维护成本 √

更易于编辑

兼容性

容易的 Fallback 检测

更多的交互可能

SVG Animation SVG + CSS SVG DOM + JavaScript

http://webpack.github.io

更… 灵活

通过图⽚片元素引⼊入 <img src=“oh-my-icon.svg” />

作为背景图⽚片引⼊入 （⽀支持 CSS Sprites）

内联 SVG 元素

SVG Symbol “概念上就是和 CSS Sprites 差不多的东⻄西”

.svg

.html with fallback

.css with fallback

span > svg > use

span > i

更灵活的 Fallback 机制 检测 USE 元素的 ownerSVGElement 属性

⼯工作流

设计师：思考怎样透过图标传递情感 设计师：画、画、画、改、改…… 设计师：把 SVG 放在某个⺫⽬目录 ⼯工程师：跑个脚本 ⼯工程师：复制、粘贴、好了

Everybody’s happy.

Q&A

https://github.com/ryaneof/svg-symbol-demo

感谢