Creating an SVG font from multiple SVG image files in Node.js

Question

I would like to create a Node.js application that allows users to combine a bunch of SVG icons into a custom web font icon set. The only similar project I found is this site , which looks interesting, but rather rude.

In the end, I would like this application to also output all the different font files between browsers and CSS to use these icons on the page using best practices. Thus, the main goal is to create an SVG icon structure.

But the first thing I want to get is combining several SVG icons into an SVG font file. It should be possible if the above site does this, but I am having trouble finding good information.

Can someone point me in the right direction? Thanks!

Edit: I came across this service , which is very similar to my goal, although I do not want to post fonts, and I would like my service to be free (and possibly open source).

Answer 1

Like many of my big ideas, someone first thought about it :)

For those who may run into this, open the Keyamoon font generator tool .

Answer 2

Late, but if someone needs it, I think it will do it: https://github.com/sapegin/grunt-webfont

Answer 3

Glyphter.com handles multi-track badges, which may be a good resource for you.

Answer 4

You can try svg-join to combine multiple SVGs into a single character collection.

This tool creates two files for you. The first is "svg-bundle.svg":

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

Each character is your separate SVG file.

The last is "svg-bundle.css":

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

Now you can use it in your 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

If you want to automate things, the NPM package is called svg-font-create .