圖示用得多之後，真正頭疼的往往不是怎麼畫，而是怎麼把它們整整齊齊帶進專案裡。

把圖示變成字型，這個念頭是怎麼來的

早年的網頁圖示多半是切好的一張張小圖，數量一多就會帶來兩個後果：請求次數往上跑，想換個顏色還得整批重新匯出。把圖示當成字型的想法，是讓它們像文字一樣交給排版系統去管——改大小、換顏色都跟著文字樣式走，不必再動一次匯出流程。

IcoMoon 從 2011 年 11 月發布起就在做這件事，官方自述它是第一個支援產生自訂圖示字型的工具。它處理的對象是向量圖示，涵蓋設計、整理、重組與發布四個環節，整套流程都在瀏覽器裡完成，本機不必額外安裝設計軟體。

從兩萬多枚裡挑出真正要用的那幾枚

官方圖示庫收了兩萬枚以上免費開放的向量圖示，以成套的開放集合組成。數量之外還有一層手藝上的交代：這些圖示經過挑選，畫的時候是手工繪製而非描摹，而且都做過像素對齊，直接拿去用時邊緣不容易發虛。

挑選的邏輯是按需取用。與其整包引入一份塞滿幾百枚圖示的大字型，不如只勾中專案裡真正會用到的那些，再讓工具把它們打成一套專屬字型。這樣產出的檔案大小更貼近實際用量，載入時少背一部分永遠不會顯示出來的東西。

輸出的格式給得很寬。圖片類有 SVG、PNG 與圖示檔，字型類有支援連字的多色圖示字型，前端方向直接給出 Elm、React、Vue 與 Flutter 的元件程式碼，另外還有把多枚圖示併進一張向量資源、靠符號引用的雪碧圖做法。同一批挑選結果可以按專案需要換成不同形態輸出，前端要元件、設計要圖片、舊專案要字型，一次操作就能分別拿到。

免費使用與授權，是兩件要分開看的事

工具本身的門檻很低，打開網頁就能開始挑選與編輯；新版應用還帶上了向量編輯器，介面上是圖形操作與程式碼雙向同步的形式，官方把它形容成用 SVG 渲染 SVG 的路子。

需要分清楚的是授權那一層。用它產生資源這件事本身沒有附帶額外要求，但一旦用到圖示庫裡的現成圖示，就得照那套圖示自己的授權來辦——庫裡每一套圖示都有獨立的作者與授權說明，可以逐套查看。以官方那套 IcoMoon-Free 為例，它的授權寫明可以在創用 CC 標姓名授權與通用公共授權之間任選其一。換句話說，開放圖示不等於隨便用，標姓名與衍生作品的要求各有各的說法。

另有一處使用習慣上的提醒：免費方案產生的分享連結只留一天。若想把一份挑選結果長期留著反覆使用，比較穩妥的做法是把匯出的資源包下載到本機，而不是依賴那條連結。

圖示工作流省事的地方，在於挑一次就能以不同形態重複用在好幾個地方。

實務建議：先在圖示庫裡按類別篩選、把專案要用的那一批收藏起來，再一次匯出成專案需要的格式；引入現成圖示之前，順手看一眼該套圖示的授權說明，把標姓名的要求記下來。