開放格式：如何自動建立圖示元件庫

在本文中，我們將運用在本系列先前文章中學到的知識，使用 Google 的 Material Design 圖示集 來建構一些很棒的東西。我們將建立一個工具，使用圖示集中包含的 10,000 多個圖示自動建立圖示元件庫，並準備分發給 Monday Studio 的設計師。

您可能以前也遇到過這種情況 — 需要將一堆素材轉換成元件庫。您將其中一些素材導入到文件中，將它們整齊地排列成網格，然後重複這個過程。光是想一想就讓人頭痛。將此過程自動化，可以讓您騰出心思去思考在這些圖示可以使用後，您需要用它們來做哪些*重要*的事情。

重複性的工作雖然有助於提升某些技能，但卻會消磨士氣。您希望您的團隊快樂且充滿動力，而不是漫無目的地移動像素。而且這也很耗時 — 您的團隊可以用這些時間來做更重要的工作。從開始使用這個工具的那一刻起，自動化這項任務就值回票價了。

建構這種自動化將會教您更具雄心壯志工作的基礎。您不必就此止步 — 您可以透過新增一些黏合和轉換層來連接不同的系統，將 Sketch 整合到您現有的許多工作流程中。

我們將建構的內容

我們將把這個專案的工作分成三個步驟

1. 讀取 SVG 資料並將其解析成我們可以在 JavaScript 中使用的內容。
2. 將該資料轉換成 Sketch 可以理解的內容。
3. 使用我們在本系列先前文章中使用的檔案格式工具，將資料儲存在 .sketch 文件中。

我們將使用一些現有的 node 函式庫和工具。這樣可以將重複造輪子的工作量保持在合理的最低限度。

您需要的東西

要跟著做，您需要相當熟悉 TypeScript，並且安裝了相當新版本的 node。對於本文，一些 JavaScript 的知識會很有幫助。至於程式碼編輯器，我們推薦 Visual Studio Code。您不需要 Sketch 或 Mac — 可以在任何作業系統上執行範例程式碼。

這些是我們將用於專案的建構基礎

• svgson — 將 SVG 轉換為 JavaScript 物件的工具。我們將在第一階段使用它。
• svg-points — 將 SVG 點轉換為路徑，反之亦然。在第二階段會很有用。
• @sketch-hq/sketch-file-format-ts — 讓在第三階段從 TypeScript 建立 Sketch 檔案變得簡單又愉快。

除了這些建構基礎，我們還需要編寫一些膠水程式碼和一個簡化的轉譯器，將 Material Design Icons 中使用的 SVG 程式碼轉譯成 Sketch 物件。

我們已將專案的所有程式碼包含在此 GitHub 儲存庫 中。我們將在此處介紹比較有趣的部分，您可以參考 GitHub 儲存庫閱讀完整的程式碼。

開始吧！

從頭開始獲取和產生我們的 Sketch 函式庫

如果您查看 src 資料夾，您會看到我們已將程式碼拆分為三個模組

• sketch-svg — 將 SVG 資料轉換為 Sketch 物件
• sketch-blocks — 一組輔助程式，讓我們更容易建立這些 Sketch 物件
• to-file — 負責將資料儲存到 Sketch 可以開啟的檔案中

src/index.ts 結合了所有這些，這表示我們可以

從磁碟讀取 SVG 檔案

const files = glob.sync('assets/material-design-icons/src/**/**/**/*.svg')

files.forEach((file, index) => {
  const svgData = fs.readFileSync(file, { encoding: 'utf8', flag: 'r' })
  ...
})

將 SVG 程式碼解析為 JavaScript 物件

使用 svgson 我們可以將 SVG 資料轉換為一個可以在 JavaScript 中輕鬆使用的物件。parseSync 函式完成了所有神奇的操作

const json = parseSync(svgData)

一旦 SVG 資料轉換為 AST（抽象語法樹），我們就可以像一般的 JavaScript 物件一樣存取其屬性

const width: number = parseFloat(json.attributes.width) || 100
const height: number = parseFloat(json.attributes.height) || 100

它還允許我們使用慣用的 JavaScript 程式碼遍歷 SVG 文件中的節點

json.children.forEach((child, index) => {
  symbolMaster.layers.push(s2v.parse(child, index))
})

建立 Sketch 物件來儲存資料

對於每個 SVG 檔案，我們將建立一個 SymbolMaster 物件，用於儲存 Sketch 文件中的圖示。

如果您使用 Visual Studio Code 編輯程式碼，TypeScript 將會協助您自動完成 Sketch 物件的所有必要屬性。

每次都輸入所有這些資訊相當繁瑣，因此我們在 sketch-blocks 中添加了一些輔助程式，讓工作更輕鬆

var symbolMaster: FileFormat.SymbolMaster = sketchBlocks.emptySymbolMaster(...)

將 SVG 資料轉換為有效的 Sketch 物件需要一些嘗試和錯誤（尤其是在路徑點座標方面）。

為了盡可能保持簡潔，我們的概念驗證專案不支援 SVG 中一些更複雜的功能（例如矩陣變換）。您可能會看到這裡有一些圖示看起來並不完美，但大多數圖示應該看起來都不錯。

儲存 Sketch 文件

一旦準備好資料，我們需要將其儲存為 Sketch 可以開啟的格式。為此，to-file 模組提供了一個非常簡單的方法：toFile(contents, path)

若要了解 contents 應該是什麼樣子，請查看主要 index.ts 檔案中的 saveFile 函式。

測試我們的工作

儲存庫中有一個動作，它會在每次提交後執行 yarn start，並將產生的資源儲存為構件，您可以從 GitHub 上的「動作」索引標籤下載。如果您想了解更多關於動作的資訊，我們將在系列的下一篇文章中介紹。

總結

您現在知道了如何自動建立圖示庫。您可以將這些知識用於其他自動化操作，例如從外部資料來源動態產生形狀，或為 Sketch 不直接支援的格式編寫匯入器。

如果您想繼續探索，請嘗試看看是否可以擴展程式碼以實作更多 SVG 功能。或者嘗試將圖示庫發佈在公開網頁上（也許使用 GitHub Pages），並使用 RSS Feed 在 Sketch 中接收自動更新。

在下一篇文章中，我們將更詳細地了解如何使用 GitHub 動作來為我們執行所有這些自動化操作，而無需任何介入。