Генерация SVG-шрифта из нескольких SVG-графики в Node.js

Question

Я хотел бы создать приложение Node.js, которое позволит пользователям объединять набор иконок SVG в набор пользовательских веб-шрифтов. Единственный похожий проект, который я нашел, это этот сайт , который выглядит интересно, но довольно глючно.

В конце концов, я бы хотел, чтобы это приложение также выводило все различные кросс-браузерные шрифтовые файлы и CSS для использования этих значков на странице, используя лучшие практики. Таким образом, общей целью является создание инфраструктуры иконок SVG.

Но первое, что я хочу получить, - это объединить несколько иконок SVG в файл шрифта SVG. Это может быть возможно, если вышеупомянутый сайт делает это, но у меня возникают проблемы с поиском полезной информации.

Может ли кто-нибудь указать мне правильное направление? Спасибо!

Редактировать: я столкнулся с этим сервисом , который выглядит очень похоже на мою цель, хотя я не хочу размещать шрифты и хотел бы, чтобы мой сервис был бесплатным (и, возможно, с открытым исходным кодом как хорошо).

Answer 1

В последнее время, но если кому-то еще это понадобится, думаю, это подойдет: https://github.com/sapegin/grunt-webfont

Answer 2

Как и многие мои большие идеи, кто-то подумал об этом первым:)

Для любого, кто может столкнуться с этим, проверьте инструмент генератора шрифтов Keyamoon .

Answer 3

Если вы хотите автоматизировать вещи, есть пакет NPM под названием svg-font-create.

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>

Answer 5

Glyphter.com обрабатывает значки с несколькими путями, что также может быть хорошим ресурсом для вас.