In this post we'll go over how to combine or convert SVG files into an icon font file.
In short, we'll git clone a repository svgtofont, modify src/cli.js and then run a node script to generate the font.
svgtofont
We'll use the library svgtofont to combine all the SVGs into a font file. It supports generating eot, ttf, woff, woff2 and svg files. Svgtofont uses other projects such as svgicons2svgfont and svg2ttf.
Cloning the repository
Command to clone it and set it up locally in your terminal:
git clone https://github.com/jaywcjlove/svgtofont.git
Generating the icon files
Add two folders in the newly cloned svgtofont folder: icons and output. "icons" is the folder where you will put all the svg files.
Modify existing src/cli.ts file by adding the website property roughly on line 46. website: { ... }, full example below:
Change your-font-name to what you want to call the font.
svgtofont({
src: sourcesPath, // svg path
dist: outputPath, // output path
// emptyDist: true, // Clear output directory contents
fontName: (argv.fontName) || "svgfont", // font name
css: true, // Create CSS files.
website: {
description: 'your-font-name',
logo: 'no-logo',
links: [],
},
outSVGReact: true,
outSVGPath: true,
svgicons2svgfont: {
fontHeight: 1000,
normalize: true,
},
})
The output
Run the converter with a node script node src/cli.js --sources ./icons --output ./output --fontName your-font-name in your terminal.
If it doesn't create the files in output folder then check that the SVG files are valid.
I had invalid SVG files and scratched my head wondering why the library did not work.
The generated icon css classes follow the naming convention of your-font-name-{svg name}.
For example for muumi.svg it would be your-font-name-muumi.
You can check all the generated icons in output/index.html.
That's it, now add the css and font files to you project and create elements like <i class="icon your-font-name-muumi"></i>
