Modern SVG icon font generator - Create TTF, WOFF, WOFF2, EOT fonts and web assets (CSS, SCSS, HTML, JSON, sprites) from SVG files with TypeScript support.
Modern SVG icon font generator - Create TTF, WOFF, WOFF2, EOT fonts and web assets (CSS, SCSS, HTML, JSON, sprites) from SVG files with TypeScript support.
A complete fonts and web assets generator that searches, optimizes, and merges SVG icon files from multiple directories or configuration files.
npm install -g iconism
npm install --save-dev iconism
iconism comes with full TypeScript support:
import iconism, { IconismOptions } from 'iconism';
const options: IconismOptions = {
name: 'myicons',
input: 'src/icons/*.svg',
output: 'dist/fonts',
types: ['woff2', 'woff', 'ttf'],
assets: ['css', 'scss', 'html'],
optimize: true,
};
await iconism(options);
const iconism = require('iconism');
// Basic usage
iconism({
name: 'myicons',
input: 'src/icons/svg',
output: 'dist/fonts',
types: ['woff2', 'woff', 'ttf'],
assets: ['html', 'css'],
height: 512,
descent: 64,
optimize: true,
});
// Async/await
const generate = async () => {
await iconism({
name: 'icons',
input: 'icons/*.svg',
output: 'build',
types: ['woff2', 'woff'],
assets: ['css', 'scss'],
});
console.log('Icons generated!');
};
generate();
iconism --help
Usage: iconism [options] <input path...>
Convert svg icons to svg, ttf, woff, woff2 and eot font formats and generate web assets.
Options:
-v, --version output the current version
-o, --output <value> output directory
-c, --config <value> configuration file
-f, --fontfamily <value> font family (default: iconfont)
-i, --id <value> font id (default: fontfamily)
-s, --style <value> font style (default: normal)
-W, --weight <value> font weight (default: normal)
-a, --ascent <int> font ascent (default: height - descent)
-d, --descent <int> font descent (default: 0)
-h, --height <int> font height (default: maximum glyph height)
-w, --width <int> font width (default: auto)
-m, --metadata <value> font metadata tag
-r, --round <int> svg path rounding (default: 1)
-b, --begin <value> start unicode codepoint (default: 0xE000)
-t, --types <value...> font types (default: woff2, woff, ttf)
-A, --assets <value...> assets (default: css, html)
-H, --hash css hash (default: false)
-T, --tag <value> css tag (default: null)
-u, --url <value> font directory url (default: null)
-p, --prefix <value> css prefix class (default: i)
-S, --selector <value> css selector (default: null)
-O, --optimize optimize svgs with svgo
-D, --debug output all information
-e, --help display help for command
# Generate fonts from directory
iconism -o dist/fonts src/icons/*.svg
# Generate with specific types
iconism -o dist -t woff2 woff -A css scss src/icons/*.svg
# Use configuration file
iconism -c iconism.config.js -o dist src/icons/*.svg
| Option | Type | Default | Description |
|---|---|---|---|
input | string|array | * required | SVG files directories, files or config |
output | string | * required | Output directory |
config | string | null | Configuration file path |
name | string | iconism | Font family name |
id | string | option.name | Font ID |
style | string | normal | Font style |
weight | integer|string | 400 | Font weight |
height | integer | max glyph height | Font height |
width | integer | auto | Font width |
ascent | integer | height - descent | Font ascent |
descent | integer | 0 | Font descent |
metadata | string | null | Font metadata / copyright |
round | integer | 1 | SVG path rounding (0-99) |
begin | integer | 0xE000 | First glyph unicode codepoint |
types | array | ['woff2','woff','ttf'] | Font types to generate |
assets | array | ['html','css'] | Web assets to generate |
hash | boolean | false | Add hash to CSS & font for cache busting |
tag | string | null | CSS tag |
url | string | null | Font directory URL in CSS |
prefix | string | i | CSS class prefix |
selector | string | null | CSS selector |
optimize | boolean | true | Optimize SVG files with SVGO |
svgo | object | null | Custom SVGO options |
debug | function|bool | () => {} | Debug logging function |
iconism({
input: 'src/icons',
output: 'dist',
});
iconism({
input: ['src/icons', 'assets/svg', 'icons/arrow.svg', 'icons/check.svg'],
output: 'dist',
});
iconism({
input: 'icons/config.json',
output: 'dist',
});
icons/config.json:
[
{
"name": "arrow-down",
"unicode": "\uE100",
"path": "icons/arrow-down.svg"
},
{
"name": "arrow-up",
"unicode": "\uE101",
"path": "icons/arrow-up.svg"
}
]
When generating JSON assets, you get rich metadata:
{
"name": "myicons",
"version": "1.0.0",
"prefix": "i",
"icons": {
"arrow-down": {
"unicode": 57600,
"hex": "e100",
"character": "",
"className": "i-arrow-down"
},
"arrow-up": {
"unicode": 57601,
"hex": "e101",
"character": "",
"className": "i-arrow-up"
}
}
}
iconism({
input: [
{
name: 'plus',
unicode: '\uE100',
d: 'M7,9H4V7H7V4H9V7h3V9H9v3H7Z',
width: 512,
height: 512,
viewBox: '0 0 512 512',
},
{
name: 'minus',
unicode: '\uE101',
path: 'icons/minus.svg',
},
],
output: 'dist',
});
Generated CSS includes helpful utility classes:
/* Size utilities */
.i-sm {
font-size: 0.75em;
}
.i-lg {
font-size: 1.25em;
}
.i-xl {
font-size: 1.5em;
}
.i-2x {
font-size: 2em;
}
.i-3x {
font-size: 3em;
}
/* Rotate utilities */
.i-rotate-90 {
transform: rotate(90deg);
}
.i-rotate-180 {
transform: rotate(180deg);
}
.i-rotate-270 {
transform: rotate(270deg);
}
/* Flip utilities */
.i-flip-horizontal {
transform: scaleX(-1);
}
.i-flip-vertical {
transform: scaleY(-1);
}
Usage:
<span class="i i-arrow-down i-2x i-rotate-90"></span>
Generated SCSS includes powerful mixins:
// Use icon by name
.my-button {
@include icon('arrow-down');
@include icon-size(1.5rem);
@include icon-rotate(45);
}
// Flip icon
.back-button {
@include icon('arrow-right');
@include icon-flip(horizontal);
}
// Spin animation
.loading-icon {
@include icon('spinner');
}
.loading-icon.i-spin {
animation: i-spin 2s linear infinite;
}
The generated HTML demo includes:
/ to search, Esc to clearCreate an iconism.config.js file for advanced options:
module.exports = {
name: 'custom-icons',
input: 'src/icons',
output: 'dist/fonts',
types: ['woff2', 'woff', 'ttf'],
assets: ['sass', 'scss', 'sprite'],
templates: {
sprite: 'templates/sprite.ejs',
},
font: {
names: {
svg: '%name%-svg',
woff2: '%name%-webfont',
},
exports: ['woff2', 'woff', 'ttf'],
},
asset: {
names: {
sprite: '%name%-sprite',
},
exports: ['sass', 'scss', 'sprite'],
},
svgo: {
plugins: [
{ name: 'mergePaths', params: { force: false } },
{ name: 'convertShapeToPath', params: { convertArcs: false } },
],
},
};
Then run:
iconism -c iconism.config.js
iconism.d.ts)/ for search, Esc to clear)@include icon(), @include icon-size(), @include icon-rotate(), @include icon-flip()<svg> → </svg>)path.join()).vscode/settings.json for better IDE support.prettierrc and .editorconfig// v1.x - Still works in v2.x
iconism({
input: 'icons',
output: 'dist',
});
// v2.x - Now requires Node.js 18+
// All other APIs remain the same
Contributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)When you encounter a problem, please open an issue.
Orçun Saltık
MIT © Orçun Saltık
FAQs
Modern SVG icon font generator - Create TTF, WOFF, WOFF2, EOT fonts and web assets (CSS, SCSS, HTML, JSON, sprites) from SVG files with TypeScript support.
The npm package iconism receives a total of 3 weekly downloads. As such, iconism popularity was classified as not popular.
We found that iconism demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.