web开发中icon系统深度指南

- 2 mins

Icon是web开发中很常见的元素。icon的采用很普遍,其易被识别的特征,可以用来吸引、警告用户,并且(如果运用恰当)能在很大程度上提高用户体验。

我们在web中运用icon的时候,选择其实极为有限。

这些都是今天常用的方式,就好比SVG元素和icon字体。在这篇文章中,我们会深入研究web开发中每一种icon的方法,并且会研究哪一种方法的性能最优。

Icon Spritesheet

我们通过许多小的图片(icon图片文件)合并为一份大文件的方式创建icon spritesheet,会用到CSS background-image,background-size和background-position的方法从icon spritesheet中展示图片。

Spritesheet example

Spritesheet样例

我们可以采用SVG spritesheet来确保在每种显示器上都可以正常展示(普通显示器和Retina显示器)并且可以结合PNG spritesheet作为旧版本浏览器的候选方案。我们可是使用JavaScript库比如Modernizr来侦测用户的浏览器是否能支持SVG,在不支持的情况下以PNG作为备选。

我们来创建一个可行的icon

<span aria-hidden="true" class="icon icon--email"></span>
<span class="hidden--visually">Send me an Email</span>

spritesheet CSS例子(可以复制或者手动键入)

.icon {   
	background-image: url('../images/spritesheet.svg');   
	background-repeat: no-repeat;   
	display: inline-block;   
	width: 64px;   height: 64px; 
} 
.no-svg .icon {
	background-image: url('../images/spritesheet.png'); 
} 
.icon--email {   
	width: 64px;   
	height: 64px;   
	background-position: 0px 0px; 
}

如果你还在想CSS样式hidden–visually是如何隐藏内容的,我在其他一篇我之前的文章中介绍过。

我们一起来评价使用icon spritesheet的优点和缺点吧。

优点

缺点

工具

Icon字体

我们可以制作包含着所需icon的字体文件来替单一的将icon合并成图片文件的方法。浏览器会将icon的字体文件当作样式更加友好文字样式来处理。

有许多制作和管理icon字体、CSS的工具,生成的CSS文件会如下。

/* Define font icon font family */ 

@font-face {     
	font-family: 'myIconFont';     
	src: url('/path/to/myIconFont.ttf?r9c57c') format('truetype'),         
	url('/path/to/myIconFont.woff?r9c57c') format('woff'),         
	url('/path/to/myIconFont.svg?r9c57c#myIconFont') format('svg');     
	font-weight: normal;     
	font-style: normal; 
} 

/* Define icon class that sets font family and shared font styles */ 

.icon {     
	font-family: 'myIconFont';     
	speak: none;     
	font-style: normal;     
	font-weight: normal;     
	font-variant: normal;     
	text-transform: none;     
	line-height: 1;     
	-webkit-font-smoothing: antialiased;     
	-moz-osx-font-smoothing: grayscale; 
} 

/* Define individual icon class that inserts the icon as a character in pseudo-element */ 

.icon--email::before {     
	content: '\e900'; 
}

我们来实现一个icon效果

<span aria-hidden="true" class="icon icon--email"></span><span class="hidden--visually">Send me an Email</span>

下面是使用icon字体的优点和缺点。

优点

缺点

工具

内联SVG icon

相比起引入某些文件(spritesheet或者icon字体)的方法,我们可以直接将SVG数据嵌入到HTML文档中,浏览器会解析和展示SVG元素,由于我们可以单独设置每一个元素的样式,所以内联SVG元素是高度可定制的。

我们来看一个使用内联式SVG的代码:

<svg labelledby="titleId descId" role="group">     
<title id="titleId">Example title</title>     
<desc id="descId">Long description explaining this example</desc>     
<!-- SVG icon code --> 
</svg>

我们使用标签为“titleId descId”作为SVG元素的标题和说明,会让元素对于辅助设备来说更加友好。将role设置为”presentation”也非常重要,因为这样会更加突出SVG的图形部分,并且被辅助设备忽略。

我们一起来评价使用内联SVG的优点和缺点吧。

优点

缺点

许多框架让icon的管理和维护变得容易。比如说,Webpack会生产版本中将所有在”/path/to/myIcon.svg”引入的文件转变为内联SVG。对于开发人员来说,更加便于管理项目。

svg图片元素

我们可以用<img>元素来引入单独的SVG文件,而不是一个<svg>标签。这可以让文件更小而且更加简便而且更加易于维护。

我们用这种方法写一个icon

<img src="email.svg" alt="Send me an email">

我们可以用srcset标记来设置旧版本浏览器的备用方案。

<img src="email.png" alt="Send me an email" srcset="email.png">

支持srcset标记的浏览器同时也会支持SVG元素,而且能自动载入SVG图片。对于不支持此标记的浏览器会自动加载PNG备用方案。

来看一下使用内联SVG图片元素的优点和缺点。

优点

缺点

rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora