Iconfont——阿里巴巴矢量圖標庫的使用

Iconfont——阿里巴巴矢量圖標庫，是阿里巴巴UED團隊(花名： 阿里媽媽MUX)打造的矢量圖標管理平台。

Iconfont

通過這個免費的工具，設計師不僅可以瀏覽下載(不可商用)大量優秀設計師的圖標作品，還可以管理和展示自己設計的圖標。是很多UI設計師日常工作的必備工具。

以下是我認為非常實用的幾點功能：

• 矢量圖標雲存儲工具，搜索功能強大

UI設計師在工作中要繪製大量的圖標，這給管理和查找圖標帶來了困難。具有好習慣的設計師，將圖標分門別類的存儲在本地，要花費一定的時間精力和存儲空間。習慣不好的設計師，估計用完即焚，下次又要重畫。

如果把圖標存儲在Iconfont上，那麼只要是有網路的地方，就可以重複使用自己之前畫過的圖標。Iconfont支持模糊搜索，讓查找圖標變得非常便捷。

• 支持尺寸和顏色的變幻，讓設計師和切圖說再見

當你在Iconfont平台上傳了一個符合其規範的矢量圖標，那你的團隊接下來要做的僅僅就是下載。

Iconfont支持選擇尺寸和顏色，所以，設計師不必再切2-3套圖，工程師需要什麼尺寸，可以在平台上自行下載。

下載時，可以設置顏色和尺寸

• 建立自己的圖標作品集，支持打賞

Iconfont的知名度意味著，設計師可以在這個平台上宣傳自己。簡歷里直接給意向企業自己圖標庫的鏈接，實力展現一目了然。

而且，優秀的作品，還會收到打賞，雖然不多，但是也算是一筆小小的收入。

在Iconfont平台上傳圖標的注意事項

工具：Sketch/Illustrator, 個人建議單色圖標兩者皆可，彩色圖標用AI。

格式：SVG

上傳不成功時的可能原因排查：

1. 顏色：支持單色和彩色，不支持漸變和透明度
2. 不支持描邊，上傳前將描邊輪廓化（outline stroke）。理想情況下，UI設計師製作圖標應該用圖形的運算，而不是描邊。如果你是用規範的方式做的圖標，就可以忽略這一步。
3. 用sketch製作的時候，確保合併所有的形狀為一個形狀組件。再導出為SVG。否則上傳SVG後，文件為空。

沒有合併形狀組件，錯誤

上傳文件成功，但是圖標顯示不出

合併成一個形狀組件，正確

1. 彩色圖標，必須在AI中先「擴展對象」（不知Sketch是否有類似功能，如果有朋友知道，請不吝賜教），再導出SVG。否則上傳的文件為空。

擴展對象

現在，我幾乎每天都要訪問Iconfont, 一方面是在設計圖標的時候採集靈感，另一方面是管理自己的圖標庫，以及所在公司項目組的圖標庫。它給我的工作帶來了極大的便利。

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