用這個圖標管理方法，工作效率蹭蹭漲！

更多圖標設計干貨：

最近我將自己團隊的圖標升級了一下，現在的圖標是這個樣子的：

對，我將圖標變成了一種字體，后續都可以直接通過字體的方式調用。只要安裝了字體，哪怕不在設計軟件中也能使用。

如果是對 Apple 的設計比較熟悉的人可能發現了，Apple 的圖標“SF Symbol” 也是通過這種方式管理的。如果你平常使用的是 SF Pro 或者 PingFang SC 等字體，可以直接通過 Apple 官方的 [SF Symbols](https://developer.apple.com/sf-symbols/) 來查找復制并使用。

Apple 也是將圖標直接做到了字體里，并廣泛的用在了自己的設計體系中。那么這篇文章我會分享一下為什么這樣做，以及如何這樣做，也是作為自己在探索 Icon 字體化中的踩坑的記錄。

一、字體化的好處

簡單來說，就是性能好、易于使用和管理

1. 性能好

即使是相較于同樣是矢量圖的 SVG 格式，字體文件的大小也出乎意料的小。我這里做了一個測試，250 個左右的圖標，導出成 SVG 后大約是 900 KB，而對應的 woff 字體文件則是 60 KB。即使算上為了兼容舊瀏覽器而增加的 ttf 和 eot 格式，一共也不到 200 KB。

更小的尺寸帶來的不止是加載速度更快，小到這個尺寸后，開發完全可以在網頁初次啟動時，直接將兼容的字體文件下載緩存，后續可以無縫的顯示圖標。而 SVG 一半是用到的時候再加載，可能存在加載出錯圖標無法顯示的情況，通過多次網絡請求也會輕微增加 Server 的負擔。

前者是 60K 的單次請求（根據用戶瀏覽器選擇文件），后者是 900 K 共計的多次請求。很顯然前者優于后者。

2. 易于使用

我之前在設計還原的時候有個很煩的地方，雖然輸出的 SVG 都是一樣的格式，但是不同模塊的開發者不一樣，他們對于 SVG 的使用方式也“各有千秋”，經常導致最終的頁面和設計師設計的有一些出入。

更加致命的是，這些出入還非常細微，比如說圖標的正常尺寸是 16px，但是某個開發也許在實現時錯誤地應用了某種樣式，最終尺寸變成了 15px。當下核查時很難看出 1px 的差異，不過當這些錯誤積累了幾個之后，界面的錯位就會比較嚴重了。

Icon font 的使用實際上是將圖標用字體的方式進行渲染，字體的樣式設置相對比較單一，不會出現 SVG 群魔亂舞一樣的情況。而且，對于字體的 CSS 樣式可以原封不動的用在 icon font 上，比如開發人員可以直接修改圖標的大小和顏色，而不需要依賴設計師重新提供素材。

總之，減少了開發的使用成本，反過來也會讓后期的設計核查輕松不少。

3. 易于管理

這是最大的好處，也是推動我使用 iconfont 的最大原因。

我先講講之前團隊的現狀，我們的團隊是一個 startup 公司，也就是創業團隊。產品迭代的速度非常快，有時候甚至是上個版本開發到一半，設計和需求就改動了，對應的 icon 也更新的特別頻繁。所以可以預見的是，在版本迭代了一段時間后，產品中不同版本的圖標混雜在一起，設計師浪費了大量的時間在圖標的細節核查上。

那么圖標的管理就非常重要了，而管理圖標的方式就是 icon font。

icon font 因為本身就是一種字體，而字體是有獨特的 id 的。比如 emoji 也是一種字體，??對應的 id 就是“U+1F600”，其他 emoji 也一樣。這樣后續如果更新了這個 emoji 樣式，只要保證更新后的 emoji 還是這個 id，那么所有應用了這個圖標的地方都會更新。

所以 icon font 的管理方式說白了就是，開發者在需要圖標的地方通過 id 引用圖標，而 font 文件中則包含了 id 和對應的圖標信息。這樣每次更新 font 文件都會更新網站中的所有對應圖標。

而 font 文件則完全可以由設計師來維護。理想情況下，設計師更新圖標后，將 SVG 們轉成新的 iconfont，開發人員直接替換，就完成了一次圖標更新，非常簡單快捷。

那么 icon font 文件應該如何制作呢？請看下一章節。

二、Icon Font 制作入門

步驟：

1. 調整 Icon
2. 上傳平臺
3. 設置發布參數

1. 調整 Icon

首先是要調整 Figma 中的圖標，因為越簡單的圖標越不容易出問題，所以我建議是將形狀中的 line 先 outline，然后全部合并 ，最后 flatten，總之是保證最后只有一個形狀。

按理來說三板斧下來這個圖標應該只剩下填充，沒有描邊了，不過以防萬一還是要確認一下。

對了填充最好統一用同一個顏色，雖然不影響最后使用，但是一致了看著舒服。

最終導出的文件，應該是一個單圖層，無描邊僅填充的 SVG 文件。

2. 上傳平臺

國內雖然阿里有一個同名的 iconFont 網站，不過上傳圖標要審核，這里建議還是使用國外的 [icomoon](https://icomoon.io/app/#/select) 。Icomoon 雖然運行在瀏覽器，但應該屬于本地軟件（類似于 photopea），也不用擔心自己的設計泄漏，只不過需要及時保存編輯的內容，不然瀏覽器一清緩存就沒有了。

Anyway，上一部中導出的 SVG 們，可以直接導入到這個平臺中。

甚至還可以做一些簡單的編輯，比如去色裁剪縮放。上一步里如果忘記去色了可以在這一步完成。

需要注意的是，一些復雜的圖標可能無法按你預期的。例如，如果我使用了不同的方式畫了 googledrive 的圖標，即使在 Figma 和系統中看上去一樣，但導入后就會有明顯的差異。

有辦法調整，但這部分比較復雜，我放到后面再講。

3. 設置發布參數

如果圖標后續還存在迭代的可能，務必認真填寫發布參數，不然后面版本會亂掉。

1. 最下面的 Version 是最重要的，Major 是大版本號，Minor 是小版本號，高版本可以覆蓋低版本。建議每次有新增圖標就將 Minor 加一，如果圖標整體風格改動較大就增加 Major
2. 字體的名字和前后綴可以任意填寫，不過最好先和開發確認，避免和他們定義的變量名重合了
3. Font Metrics 適用于圖標和文字混合輸入的情況，比如 Apple 的 Symbol 就可以支持和文字一起輸入。我的圖標都是和文字獨立的，就不需要考慮這個。
4. 其他選項按默認的來

最終導出后，是一個壓縮包，里面包含了字體文件和用于連接網頁的 css，以及一些 demo 和簡單教程。

剩下的事情就是交付開發了。

4. 版本管理

如果你沒有清理系統垃圾的習慣，那么之前你在 icomoon 網站上編輯過的內容都會存在本地，下次點開就應該還在，可以繼續更新圖標，然后導出新版本的 icon font 文件。

但是，如果瀏覽器的緩存被清了，千萬不要重新在 icomoon 上開一個新的項目，再次導入所有的 icon 文件。因為每次導入新圖標時，icomoon 都會給圖標創建一個 id 來對應圖標。在新的項目中的每個 id - 圖標 的對應關系，不太可能和舊項目一致，如果直接將新項目導出的文件交付開發，整個平臺的圖標都會亂掉。

這個時候，應該導入上個版本的項目文件，在那基礎上繼續更新。項目文件就是之前導出的文件中的 selection.json，里面包含了所有的圖標和上個版本的發布參數。

5. SVG 的填充模式

SVG 是有兩種填充模式的，nonzero 和 evenodd，具體的差別可以看[搞懂 SVG/Canvas 中 nonzero 和 evenodd 填充規則](https://www.zhangxinxu.com/)，這篇講的比較清楚。

icomoon 目前支持的是 nonzero 以及一些 簡單形狀的 evenodd。Figma 則是兩種都支持，這就導致了，可能 SVG 在 evenodd 模式下看上去是正常的，在 nonzero 模式下就不如預期了。

Figma 中默認使用的是 evenodd 模式，但是依賴插件 [Vector Path Editor](https://www.figma.com/community/plugin) 可以切到 nonzero 模式，并調整在該模式下的填充規則。

對于一些復雜的圖標，務必先在這個插件的幫助下調整填充模式進行預覽。

總結

（下面是 GPT 生成的）

通過本文的介紹，相信你已經了解了 Icon 字體化的好處以及制作方法。以下是本文的核心總結：

1. 性能優異

Icon 字體文件體積小，加載效率高，相比 SVG 格式更加適合網頁的快速響應需求，減少多次網絡請求和 Server 負擔。

2. 使用方便

Icon 字體統一了圖標的管理方式，減少了 SVG 使用中可能出現的誤差和不一致，讓開發人員能夠更高效地調整圖標樣式（如大小、顏色），降低了設計還原和溝通的成本。

3. 便于管理

Icon 字體的 `id` 機制使得圖標更新高效且規范，尤其適合頻繁迭代的團隊，可以確保圖標版本管理清晰，避免因新建項目導致的圖標錯亂問題。

4. 制作簡單

從圖標調整到平臺上傳，再到發布參數設置，只需幾個簡單的步驟即可完成。合理的版本管理和發布參數設置，可以讓后續更新和交付開發變得更加快捷。

5. 注意事項

要留意 SVG 填充模式（nonzero 和 evenodd）在不同工具間的差異。

制作 Icon 字體時，推薦使用如 Icomoon 這樣的工具，并妥善保管項目文件（`selection.json`）以便后續更新。

通過以上方法，你的團隊可以輕松實現高效的圖標管理和交付，提升整體設計和開發協作效率。