Icon Font Builder

Generate icon fonts from SVG files and automatically create CSS classes.

Table of Contents

• Install
• CLI
• Node API
• Usage
  • Example project structure
• Examples
  • Gulp
    • Minimal configuration
    • Recommended configuration
    • Full configuration
• Options
• Requirements
• Author
• License

Features

• Generate icon fonts from SVG files
• Automatic CSS class generation
• CLI and Node API support
• Customizable output structure
• Automatic icons preview page

Install

npm install @epiled/icon-font-builder

CLI

npx @epiled/icon-font-builder

Node API

import { buildIcons } from "@epiled/icon-font-builder";

await buildIcons();

Usage

After building the icons, include the generated CSS in your project:

<link rel="stylesheet" href="css/icons.css" />

Then use the icons with CSS classes:

<i class="icon-add-user"></i>
<i class="icon-arrow"></i>

Example Project Structure:

src/
├── icons/
|  ├── add-user.svg
|  └── arrow.svg

Examples

Gulp

Example using Gulp task runner.

Minimal configuration

import gulp from "gulp";
import { buildIcons } from "@epiled/icon-font-builder";

gulp.task("buildIcons", async function () {
  await buildIcons();
});

Output Tree:

dist/
├── css/
|  └── icons.css
├── fonts/
|  └── Icons/
|     ├── Icons.svg
|     ├── Icons.ttf
|     ├── Icons.woff
|     └── Icons.woff2
└── icons-preview.html

Output CSS:

@font-face {
  font-family: "Icons";
  src:
    url("../fonts/Icons/Icons.woff2") format("woff2"),
    url("../fonts/Icons/Icons.woff") format("woff"),
    url("../fonts/Icons/Icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "Icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-add-user::before {
  content: "\e001";
}

.icon-arrow::before {
  content: "\e002";
}

Recommended configuration

import gulp from "gulp";
import { buildIcons } from "@epiled/icon-font-builder";

gulp.task("buildIcons", async function () {
  await buildIcons({iconsName: "Epl-Icons"});
});

Output Tree:

dist/
├── Epl-Icons/
│   └── Epl-Icons/
│       ├── Epl-Icons.svg
│       ├── Epl-Icons.ttf
│       ├── Epl-Icons.woff
│       └── Epl-Icons.woff2
├── css/
│   └── epl-icons.css
└── icons-preview.html

Output CSS:

@font-face {
  font-family: "Epl-Icons";
  src:
    url("../Epl-Icons/Epl-Icons/Epl-Icons.woff2")
      format("woff2"),
    url("../Epl-Icons/Epl-Icons/Epl-Icons.woff")
      format("woff"),
    url("../Epl-Icons/Epl-Icons/Epl-Icons.ttf")
      format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "Epl-Icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-add-user::before {
  content: "\e001";
}

.icon-arrow::before {
  content: "\e002";
}

Full configuration

import gulp from "gulp";
import { buildIcons } from "@epiled/icon-font-builder";

gulp.task("buildIcons", async function () {
  await buildIcons({
    iconsName: "Icons-All", // required
    inputDir: "src/icons",
    outputDir: `dist/Icons-Output`,
    font: {
      fontName: "Icons-Font-Name",
      folderName: "Icons-Folder-Name",
      fontFileName: "Icons-Font-File-Name",
      fontPath: "../Icons-Font-Path",
    },
    css: {
      cssClass: "icon-all",
      cssFileName: "icons-css-file-name",
    },
    templates: {
      styles: {
        generation: true,
        outputDir: "dist",
      },
      preview: {
        generation: true,
        outputDir: "dist",
      },
    }
    stripPrefix: "icon-", // removes "icon-" prefix from icon filenames
    codepointsFile: ".icon-builder-cache",
  });
});

Output Tree:

dist/
├── Icons-Output/
│   └── Icons-Folder-Name/
│       ├── Icons-Font-File-Name.svg
│       ├── Icons-Font-File-Name.ttf
│       ├── Icons-Font-File-Name.woff
│       └── Icons-Font-File-Name.woff2
├── css/
│   └── icons-css-file-name.css
└── icons-preview.html

Output CSS:

@font-face {
  font-family: "Icons-All";
  src:
    url("../Icons-Font-Path/Icons-Folder-Name/Icons-Font-File-Name.woff2")
      format("woff2"),
    url("../Icons-Font-Path/Icons-Folder-Name/Icons-Font-File-Name.woff")
      format("woff"),
    url("../Icons-Font-Path/Icons-Folder-Name/Icons-Font-File-Name.ttf")
      format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-all-"],
[class*=" icon-all-"] {
  font-family: "Icons-All" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-all-add-user::before {
  content: "\e001";
}

.icon-all-arrow::before {
  content: "\e002";
}

Options

Option	Type	Default	Description
iconsName	string	Icons	Name of the icon set
inputDir	string	src/icons	Source folder for SVG icons
outputDir	string	dist/fonts	Output directory
font.fontName	string	Icons	Font name
font.folderName	string	Icons	Folder name for font files
font.fontFileName	string	Icons	Font file base name
font.fontPath	string	../fonts	Path to font in generated styles
css.cssClass	string	icon	CSS class prefix
css.cssFileName	string	icons	Name of generated CSS/SASS file (without extension)
templates.styles.generation	boolean	true	Enable or disable generation of style files (CSS/SASS)
templates.styles.outputDir	string	dist	Directory where generated style files will be written
templates.preview.generation	boolean	true	Enable or disable generation of the preview file (HTML demo)
templates.preview.outputDir	string	dist	Directory where the preview file will be written
formats	("css" | "sass")[]	["css"]	Style formats to generate when styles template is enabled
stripPrefix	string | null	null	Remove a prefix from icon names
codepointsFile	string	.icon-builder-cache	File path to store persistent icon codepoints

Requirements

• Node.js >= 22

Author

• Felipe de Andrade

License

MIT