在 Node.js 中从多个 SVG 图形生成 SVG 字体答案

【问题标题】：Generating SVG font from multiple SVG graphics in Node.js在 Node.js 中从多个 SVG 图形生成 SVG 字体
【发布时间】：2012-03-12 08:14:31
【问题描述】：

我想创建一个 Node.js 应用程序，它允许用户将一堆 SVG 图标组合成一个自定义的网络字体图标集。我发现的唯一类似的项目是this site，它看起来很有趣，但也有很多问题。

最终，我希望这个应用程序还可以输出所有各种跨浏览器字体文件和 CSS，以便使用最佳实践在页面上使用这些图标。所以总体目标是创建一个 SVG 图标框架。

但我想要开始工作的第一件事是将多个 SVG 图标组合到一个 SVG 字体文件中。如果上述网站正在这样做，那一定是可能的，但我找不到任何好的信息。

谁能指出我正确的方向？谢谢！

编辑：我遇到了this service，它看起来与我的目标非常相似，尽管我不想托管这些字体，并且我希望我的服务是免费的（也可能是开源的）。

【问题讨论】：

标签： node.js svg icons

【解决方案1】：

有点晚了，但如果其他人需要它，我认为这样就可以了：https://github.com/sapegin/grunt-webfont

【讨论】：

【解决方案2】：

就像我的许多大创意一样，有人首先想到了它:)

任何可能遇到此问题的人，请查看Keyamoon's font generator tool。

【讨论】：

如何使用 npm 包在构建时滚动字体文件？
@hurrymaplelad 太棒了，特别是如果它生成了一个样式表来将特殊字符映射到 CSS 类。

【解决方案3】：

如果你想实现自动化，可以使用一个名为 svg-font-create 的 NPM 包。

【讨论】：

【解决方案4】：

Glyphter.com 处理多路径图标，因此这对您来说也是一个很好的资源。

【讨论】：

【解决方案5】：

您可以尝试svg-join 将多个 SVG 合并到一个符号集合中。

此工具会为您创建两个文件。第一个是“svg-bundle.svg”：

<svg ...>
  <symbol id="svg1" ...>
  <symbol id="svg2" ...>
</svg>

每个符号都是您单独的 SVG 文件。

最后一个是“svg-bundle.css”：

.svg_svg1,
.svg_svg2 {
  width: 20px; // for example
  height: 20px;
}

现在你可以在你的 html 中使用它了：

<link rel="stylesheet" type="text/css" href="svg-bundle.css" />
...
<svg class="svg_svg1"><use xlink:href="svg-bundle.svg#svg1"></svg>
<svg class="svg_svg2"><use xlink:href="svg-bundle.svg#svg2"></svg>

【讨论】：