web項目中圖標的前端處理方案

前言

昨天劃完重點，今天分享一個在開發過程中經常遇到的圖標處理問題。今日早讀文章由@網易考拉海購分享。

正文從這開始～

工程中用到圖標是常事，那這些圖標我們前端一般是怎麼解決的呢？這幾種方案有什麼優缺點呢？

第一種： SVG Sprite

SVG sprite其實就是svg的集合。SVG即可縮放矢量圖形 (Scalable Vector Graphics)的簡稱，是一種用來描述二維矢量圖形的XML標記語言。SVG圖形不依賴於解析度, 因此圖形不會因為放大而顯示出明顯的鋸齒邊緣.使用svg格式我們可以直接用代碼來描繪圖像，可以用任何文字處理工具打開svg圖像，通過改變部分代碼來使圖像具有交互功能，並可以隨時插入到HTML中通過瀏覽器來瀏覽。

單個SVG 圖的使用

多個SVG圖的使用

SVG屬性中，可以利用 symbol 來定義一個圖形模板對象，並利用 use 將其實例化。use 使用時加入 symbol 的id名就可以顯示該圖標。

如果 SVG symbol 不是內嵌在 html 中，而是獨立的SVG文件，則use 使用路徑名來引用。

多個SVG文件的合併可以使用gulp構建工具來完成，這裡不詳細敘述。可以在SVG標籤上增加樣式名，控制圖標的顯示。

優點:

縮放無損還原。

可設置樣式，控制圖標的顏色，大小，漸變等效果。

可利用CSS實現動畫。

減少HTTP請求。

缺點

SVG在繪製的性能上比PNG要差。

複雜的圖形或漸變可能顯示不全。

兼容性稍差,支持 ie9+,及現代瀏覽器。

第二種：iconfont

使用字體圖標，這種方式也正在被大家接受和認可。將多個矢量圖合併生成字體文件，然後在CSS中引用對應的字體編碼即可顯示圖標。字體圖標適用於各個瀏覽器屏幕。通過控制font-size的大小調整圖標大小。常用的字體圖標網站是www.iconfont.cn/ 和 icomoon.io/

方式一：font class引用

將字體的編碼加在樣式的偽類上來實現。

css代碼如下：

@font-face{

font-family:"iconfont";

src:url( iconfont.eot?t=1502445479693 );/* IE9*/

src:url( iconfont.eot?t=1502445479693#iefix )format( embedded-opentype ),/* IE6-IE8 */

url( iconfont.woff?t=1502445479693 )format( woff ),/* chrome, firefox */

url( iconfont.ttf?t=1502445479693 )format( truetype ),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url( iconfont.svg?t=1502445479693#iconfont )format( svg );/* iOS 4.1- */

}

.icon{

font-family:"iconfont"!important;

font-size:16px;

}

.icon-close:before{content:"e736";}

.icon-down:before{content:"e971";}

html代碼如下：

特點：

兼容性良好，支持ie8+，及所有現代瀏覽器。

相比於直接在html代碼里寫unicode，這種寫法語意明確，書寫更直觀，直接看樣式名就知道是什麼icon了。

因為使用class來定義圖標，所以當要替換圖標時，只需更換樣式名就可以了。

不支持多色圖標。

方式二：unicode引用

跟方式一類似，只是unicode代碼引用位置不同而已。

css代碼如下：

@font-face{

font-family:"iconfont";

src:url( iconfont.eot );/* IE9*/

src:url( iconfont.eot#iefix )format( embedded-opentype ),/* IE6-IE8 */

url( iconfont.woff )format( woff ),/* chrome, firefox */

url( iconfont.ttf )format( truetype ),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url( iconfont.svg#iconfont )format( svg );/* iOS 4.1- */

}

.icon{

font-family:"iconfont"!important;

font-size:16px;

}

html代碼如下：



?

特點：

兼容性最好，支持ie6+，及所有現代瀏覽器。

支持按字體的方式去動態調整圖標大小，顏色等等。

只支持單色圖標。

可讀性不好，需要在html代碼里寫上unicode字元。

此種方式已經不常用了。

第三種：DataURI

DataURI是利用規範將圖片轉換成Base64編碼的文本字元，不僅是圖片，還可以編碼JS、CSS、HTML等文件。通過將圖標文件編碼成文本字元，從而可以直接寫在HTML/CSS文件裡面，不會增加任何多餘的請求。

但是DataURI的劣勢也是很明顯的，每次都需要解碼從而阻塞了CSS渲染，而且CSS的體積也會增加不少。這種方法一般不建議使用。常用解碼網站tool.css-js.com/base64.html

第四種：image sprite

將多個小圖標合成雪碧圖，這是比較古老的圖片處理方式了。將多個圖標合成一個圖片文件，然後利用css的background-position定位顯示不同的icon圖標。

優點：

PC端兼容性好。不同瀏覽器公用一個圖片文件，不用考慮兼容性問題。

減少圖標的請求數。多個圖標合成一個文件後，只需請求一次就可以。且該文件可以被瀏覽器緩存。

減少圖片位元組。合併後的圖片位元組比單個圖標相加的位元組少得多。

缺點：

維護困難。每新增一個圖標，都需要改動原來的合併圖片源文件。

定位不夠靈活。圖標的位置要有一定的規範，圖標與圖標之間需要留有一定間距，避免相互干擾影響定位。

操作繁瑣。需要維護圖片，修改樣式。

對高dpr的屏幕圖標還得額外維護一份。

鑒於前面幾種更好的方法，此種圖片合併的方式已經過時。

最後，你現在通常用哪一種方案呢？

關於本文

作者；@網易考拉海購

原文：https://github.com/kaola-fed/blog/issues/107

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 前端早讀課 的精彩文章: