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

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

第一種： SVG Sprite

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

單個SVG圖的使用

<svg width="16" height="16" viewBox="0 0 16 16">
    <path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path>
</svg>
複製代碼

多個SVG圖的使用

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

<svg>
    <symbol id="001-home" viewBox="0 0 16 16">
        <path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"/>
    </symbol>
    <symbol id="002-home2" viewBox="0 0 16 16">
        <path fill="#000000" d="M8 0.5l-8 8 1.5 1.5 1.5-1.5v6.5h4v-3h2v3h4v-6.5l1.5 1.5 1.5-1.5-8-8zM8 7c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1z"/>
    </symbol>
    <symbol id="003-home3" viewBox="0 0 16 16">
        <path fill="#000000" d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"/>
    </symbol>
</svg>

<svg><use xlink:href="#001-home"/></svg>
<svg><use xlink:href="#002-home2"/></svg>
複製代碼

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

<svg><use xlink:href="images/aa.svg#001-home"/></svg>
複製代碼

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

優勢:

縮放無損還原。
可設置樣式，控制圖標的顏色，大小，漸變等效果。
可利用CSS實現動畫。
減小HTTP請求。

缺點

SVG在繪製的性能上比PNG要差。
複雜的圖形或漸變可能顯示不全。
兼容性稍差,支持 ie9+,及現代瀏覽器。

第二種：iconfont

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

方式一：font class引用

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

css代碼以下：bash

@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代碼以下：markdown

<i class="icon icon-close"></i>
複製代碼

特色：svg

兼容性良好，支持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代碼以下：

<i class="icon">&#xe736;</i>
<i class="icon">&#xe971;</i>
複製代碼

特色：

兼容性最好，支持ie6+，及全部現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
只支持單色圖標。
可讀性很差，須要在html代碼裏寫上unicode字符。

此種方式已經不經常使用了。

第三種：DataURI

DataURI是利用規範將圖片轉換成Base64編碼的文本字符，不只是圖片，還能夠編碼JS、CSS、HTML等文件。經過將圖標文件編碼成文本字符，從而能夠直接寫在HTML/CSS文件裏面，不會增長任何多餘的請求。

可是DataURI的劣勢也是很明顯的，每次都須要解碼從而阻塞了CSS渲染，並且CSS的體積也會增長很多。這種方法通常不建議使用。經常使用解碼網站http://tool.css-js.com/base64.html

第四種：image sprite

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

優勢：

PC端兼容性好。不一樣瀏覽器公用一個圖片文件，不用考慮兼容性問題。
減小圖標的請求數。多個圖標合成一個文件後，只需請求一次就能夠。且該文件能夠被瀏覽器緩存。
減小圖片字節。合併後的圖片字節比單個圖標相加的字節少得多。

缺點：

維護困難。每新增一個圖標，都須要改動原來的合併圖片源文件。
定位不夠靈活。圖標的位置要有必定的規範，圖標與圖標之間須要留有必定間距，避免相互干擾影響定位。
操做繁瑣。須要維護圖片，修改樣式。
對高dpr的屏幕圖標還得額外維護一份。

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