开放格式：如何自动化创建图标库

在本文中，我们将使用我们在本系列之前的文章中学到的知识，使用 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 图标中使用的 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 Code Studio 编辑代码，TypeScript 将帮助您自动完成 Sketch 对象的所有必需属性。

每次都输入所有这些信息非常无聊，因此我们在 sketch-blocks 中添加了一些帮助程序来使我们的生活更轻松

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

将 SVG 数据转换为有效的 Sketch 对象需要一些反复试验（尤其是在路径点坐标方面）。

为了尽可能简单，SVG 中的一些更复杂的功能（如矩阵转换）我们的概念验证项目不支持其中一些功能。 您可能会在这里看到几个看起来不太完美的图标，但大多数图标应该看起来不错。

保存 Sketch 文档

一旦我们准备好数据，我们需要将其保存为 Sketch 可以打开的格式。 为此，to-file 模块为我们提供了一个非常简单的方法：toFile(contents, path)

要了解 contents 需要是什么样子，请查看主 index.ts 文件中的 saveFile 函数。

测试我们的工作

仓库中有一个 Action，它会在每次提交后运行 yarn start，并将生成的资源存储为一个工件，您可以从 GitHub 上的“Actions”选项卡下载。如果您想了解有关 Actions 的更多信息，我们将在本系列的下一篇文章中介绍。

总结

您现在知道如何自动化图标库的创建了。您可以将此知识用于其他自动化，例如从外部数据源动态生成形状，或编写 Sketch 不直接支持的格式的导入器。

如果您想继续探索，请尝试扩展代码以实现更多的 SVG 功能。或者尝试在公共网页上发布该库（也许使用 GitHub Pages），并使用 RSS feed 在 Sketch 中接收自动更新。

在下一篇文章中，我们将更详细地了解如何使用 GitHub Actions 为我们运行所有这些自动化，而无需我们进行任何干预。