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

Question

我想创建一个Node.js应用程序，允许用户将一堆SVG图标组合成自定义Web字体图标集。我找到的唯一类似的项目是这个网站，看起来很有趣，但很容易出现错误。

最终，我希望这个应用程序还能输出各种跨浏览器的字体文件和使用这些图标的CSS，以最佳实践来使用这些图标。因此，总体目标是创建一个SVG图标框架。

但我想要实现的第一件事是将多个SVG图标组合成SVG字体文件。如果上述提到的网站可以做到，那么一定是可能的，但我很难找到任何好的信息。

有人可以指点我方向吗？谢谢！

编辑：我发现这项服务非常类似于我的目标，尽管我不想托管字体，而且我希望我的服务是免费的（并且可能也是开源的）。

- Adam Biggs

Answer 1

有点晚了，但如果有其他人需要，我认为这个可以解决问题：https://github.com/sapegin/grunt-webfont

- Ionuț Staicu

Answer 2

像我的许多大想法一样，有人先想到了它 :)

对于任何可能遇到这个问题的人，请查看Keyamoon的字体生成器工具。

- Adam Biggs

---

要不要在构建时使用npm包来生成字体文件？ - hurrymaplelad

@hurrymaplelad 那将是很棒的，特别是如果它生成一个样式表来将特殊字符映射到CSS类。 - Adam Biggs

Answer 3

如果你想自动化处理事情，可以使用一个叫做svg-font-create的NPM包。

- Édouard Lopez

Answer 4

你可以尝试使用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>

- Climenty

Answer 5

Glyphter.com 处理多路径图标，这可能也是一个很好的资源。

- William Neely