阿里UX矢量圖標庫–最強大的矢量圖標庫（Icon font製做力薦工具）

繼前面介紹過ICON-FONT的製做後，找了幾個ICON庫都是國外的
今天偶然發現阿里巴巴的圖標矢量庫，www.iconfont.cn 
用了以後感受很強大，豐富的圖標庫(集合阿里媽媽&淘寶的圖標庫)，還支持本身上傳，關鍵還能生成你項目專用的CDN，速度不言而喻，支持國產。下面引用介紹

轉載請註明來源：Web前端(W3Cways.com) - Web前端學習之路 » 阿里UX矢量圖標庫–最強大的矢量圖標庫（Icon font製做力薦工具）

 

使用SVG來代替Web Iconfont(圖形字體化)

 

從最開始的，使用img圖片到後來的使用css sprite(web前端工程師必須掌握的技巧–CSS Sprites技術（附基礎操做教程）)來減小服務器請求，到如今流行使用的圖形字體化iconfont(阿里UX矢量圖標庫–最強大的矢量圖標庫（Icon font製做力薦工具）)
可是，Iconfont存在一些弊端：

1. 瀏覽器將其視爲文字進行抗鋸齒優化，有時獲得的效果並無想象中那麼銳利。 尤爲是在不一樣系統下對文字進行抗鋸齒的算法不一樣，可能會致使顯示效果不一樣。
2. Icon Font 做爲一種字體，Icon 顯示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 屬性的影響。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產生影響，調整起來很不方便。
3. 使用上存在不便。首先，加載一個包含數百圖標的 Icon Font，卻只使用其中幾個圖標，很是浪費加載時間。 若是是本身製做 Icon Font 以及把多個 Icon Font 中用到的圖標整合成一個 Font 也很是不方便。固然使用阿里UX矢量圖標庫能夠解決這個問題
4. 爲了實現最大程度的瀏覽器支持，可能要提供至少四種不一樣類型的字體文件。包括TTF、WOFF、EOT 以及一個使用 SVG 格式定義的字體。若是是本身製做的話，可能要頭疼死

SVG優點

1. SVG是矢量圖形文件，能夠隨意改變大小，而不影響圖標質量。
2. 能夠用CSS樣式來自由定義圖標顏色，好比顏色/尺寸等效果。
3. 全部的SVG能夠所有在一個文件中，節省HTTP請求 。
4. 使用SMIL、CSS或者是javascript能夠製做充滿靈性的交互動畫效果。
   因爲SVG也是一種XML節點的文件，因此可使用gzip的方式把文件壓縮到很小。

開發者們想出了多種使用 SVG 的技巧來解決/緩解上述問題，下面咱們來逐個盤點目前常見的使用方法。

img/object 標籤

使用 img 和 object 標籤直接引用 SVG 是早期常見的使用方法。 這種方法的缺點主要在於要求每一個圖標都單獨保存成一個 SVG 文件，使用時也是單獨請求的。 若是在頁面中使用的多個圖標，每一個都是單獨請求的話會產生不少請求數，增長服務端的負載和拖慢頁面加載速度， 所以如今不多使用了。
不過，在 IE 中可使用 object 標籤實現最後討論的 SVG Defs/Symbols 的效果。

Inline SVG

所謂 Inline SVG，就是直接把 SVG 寫入 HTML 中，這種方法簡單直接，並且具備最強的可調性。 使用這種方法，你可使用 CSS 的fill屬性和stroke屬性來控制填充顏色和邊線的顏色， 若是 SVG 圖標包含多個部分，你甚至能夠設置每一個部分的樣式。同時，使用 JavaScript 修改 SVG 和生成動畫效果均可以實現。
Inline SVG 做爲 HTML 文檔的一部分，不須要單獨請求。臨時須要修改某個圖標的形狀也比較方便。 可是 Inline SVG 使用上比較繁瑣，須要在頁面中插入一大塊 SVG 代碼所以不適合手寫，圖標複用起來也比較麻煩。
好在咱們大部分的頁面都是由某種模板渲染出來的，不管是使用 PHP、Jinja2 仍是 ERuby 模板語言， 均可以定義一個函數來幫咱們 include 這些 SVG。所以在不少狀況下是很好的解決方案， 其不適合的主要使用場景就是純靜態頁面或者先後端分離客戶端頁面。

Data URIs

Data URIs 是一種不怎麼常見的技巧。以前咱們在 CSS 裏定義元素的背景圖片時，常使用像下面這種方式

.icon {
  backgound-image: url(icons/a.png)
  /* ... */
}

而如今，url當中能夠放置的能夠不只僅是指向資源的 URL 連接，而能夠是數據自己。使用 Data URIs，不管是圖片仍是 SVG， 你均可以將其編碼爲 base64 並直接寫入 CSS。譬如

.icon{
  background: url(data:text/svg+xml;base64,<base64 encoded data>)
}

關於 base64 編碼，以前我寫過一篇使用Data URIs來提升你的網站速度使用這種方法，SVG Icon 使用起來和 Icon Font 同樣只須要爲元素添加 CSS 便可，全部的資源均可以整合在一個 CSS 文件中，
不須要額外引用 SVG 文件。
若是你在使用 Gulp 或者 Grunt 這樣的 Build 工具，那麼將 SVG 整合到一個 CSS
當中是能夠很是方便地自動化完成的。這個任務只有簡單的字符串和編碼處理，基本不須要依賴非 JavaScript 的庫和資源。

使用這種方法的缺點是不能方便地使用 CSS 修改 Icon 的顏色和邊線屬性。

SVG Sprite

目前，一些提供製做 Icon Font 功能的網站 (如icomoon) 已經提供輸出 SVG Sprites 功能了。
SVG Sprites 能夠看作上述 Data URIs 方法和以前使用位圖的 Sprite 方法的組合。

在 Icon Font 還沒普及、圖標還主要依靠位圖顯示的時候，前端工程師都會使用 Sprite 來減小圖片請求的次數。 其原理很簡單：將全部的圖標以必定的間隔排列起來組成一整張大圖片，使用時對於某個 Icon，編寫以下所示的 CSS。

.icon-a {
  background-image: url(/path/to/pic/contains/all/icons.png);
  background-position: 0 120px !important;
  width: 24px;
  height: 24px;
}

 上述 CSS 經過設定background-position調整大圖片在背景中的位移，只將某個單個 Icon 暴露出來，其餘部分都切掉。 對於全部的 Icon 都寫成這樣的 CSS 便可使用了。基礎的 SVG Sprite 其實只是將原來的位圖改爲了 SVG。

SVG Sprite 相比於原來的位圖 Sprite 的一個優勢就是能夠經過 CSS 調整 Icon 顯示的大小。 使用時還能夠 Fallback 到位圖的 Sprite，所以有極好的瀏覽器兼容性。 不過和 Data URIs 方法同樣它一樣存在不能方便調整顏色樣式的問題。目前輔助生成 SVG Sprites 的工具備 grunt-iconizr、
gulp-svg-sprites 等。
使用這兩個工具，只需將用到的 SVG 放到某個文件夾中就能夠自動被拼合成 Sprite 並輸出對應 CSS。
兩個工具都支持生成 PNG 格式的位圖做爲 Fallback，缺點是生成位圖要依賴phantomjs
這個重量級 JS 庫。

SVG Defs/Symbols

SVG Defs 和 Symbols 的原理相似，這裏着重介紹一下 SVG Symbols 的使用， SVG Defs/Symbols 本質上是對 Sprite 的進一步優化。以前，咱們須要使用相對位置來控制哪一個圖標被顯示出來， 可是其實 SVG 自己的定義容許你以某一種方式直接引用 SVG 中的某一部分。
將多個圖標整合成一個 SVG 中的多個 Symbols 以後是下面這樣的

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 
    <symbol id="circle-cross" viewBox="0 0 32 32">
      <title>circle-cross icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/>
    </symbol>
 
    <symbol id="circle-check" viewBox="0 0 32 32">
      <title>circle-check icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/>
    </symbol>
 
    <!-- .... -->
</svg>

 

每一個 Symbol 設置一個 id 做爲引用時的名字。使用 id 引用這個 SVG 中的 Icon 有兩種方式。第一種，將上述 SVG 做爲 body 的第一個元素插入在 HTML 中 (Chrome 存在一個
bug 致使不在這裏顯示不出圖像)，
此後，在須要顯示某個 Icon 的地方插入下面的代碼便可：

<svg class="icon">
  <use xlink:href="#circle-cross"></use>
</svg>

 這裏的use標籤直接使用#circle-cross這個 id 引用了 SVG 中的圖標。這種方式的瀏覽器兼容性較好。

第二種方式，這種方式不須要在 body 開始的地方插入 SVG，而是使用完整路徑引用 Icon。

<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>

 

顯示出來的效果就是下面這個樣子 (可使用瀏覽器的 Debug 工具來檢視下面的代碼)。

 

這種方式使用上跟img標籤沒有什麼太大的差異了。好處在於全部的圖標都在一個文件中，所以只會請求一次。 這種不須要像 Sprite 那樣繁瑣的設置圖片的位移。使用 id 命名圖標並使用時直接使用 id 引用既直觀又簡單。 其靈活性和 Inline SVG 幾乎同樣——你能夠設置顏色、邊線樣式、大小等等。 視瀏覽器的不一樣，有時你須要使用做爲 SVG 標籤的開始。

<svg xmlns="http://www.w3.org/2000/svg">

 

對於 IE 則須要使用object標籤代替<svg><use>。關於兼容性討論詳見
這篇文章。

除了前面提到過的幾個 Gulp 和 Grunt 的插件都已經支持 SVG Defs/Symbols 了以外，這裏再推薦一個更輕量的 Gulp 插件
gulp-svg-symbols。若是隻使用 SVG Symbols 而無需 Sprite 支持，
那麼使用 gulp-svg-symbols 能夠免去對 phantomjs
的依賴。

原文地址：http://www.w3cways.com/1733.html