Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font, Generator of fonts from SVG icons.
Install | Usage | Font Usage | API | options | npm | License
Features:
- Supported font formats:
WOFF2
,WOFF
,EOT
,TTF
andSVG
. - Support SVG Symbol file.
- Allows to use custom templates (example
css
,less
and etc). - Automatically generate a preview site.
Icon Font Created By svgtofont
- file-icons File icons in the file tree.
- uiw-iconfont The premium icon font for @uiw-react Component Library..
npm i svgtofont
const svgtofont = require("svgtofont");
svgtofont({
src: path.resolve(process.cwd(), "icon"), // svg path
dist: path.resolve(process.cwd(), "fonts"), // output path
fontName: "svgtofont", // font name
css: true, // Create CSS files.
}).then(() => {
console.log('done!');
});
Or
const svgtofont = require("svgtofont");
const path = require("path");
svgtofont({
src: path.resolve(process.cwd(), "icon"), // svg path
dist: path.resolve(process.cwd(), "fonts"), // output path
fontName: "svgtofont", // font name
css: true, // Create CSS files.
startNumber: 20000, // unicode start number
svgicons2svgfont: {
fontHeight: 1000,
normalize: true
},
// website = null, no demo html files
website: {
title: "svgtofont",
// Must be a .svg format image.
logo: path.resolve(process.cwd(), "svg", "git.svg"),
version: pkg.version,
meta: {
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
},
description: ``,
links: [
{
title: "GitHub",
url: "https://github.com/jaywcjlove/svgtofont"
},
{
title: "Feedback",
url: "https://github.com/jaywcjlove/svgtofont/issues"
},
{
title: "Font Class",
url: "index.html"
},
{
title: "Unicode",
url: "unicode.html"
}
],
footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>`
}
}).then(() => {
console.log('done!');
});;
const {
createSVG,
createTTF,
createEOT,
createWOFF,
createWOFF2,
createSvgSymbol
} = require("svgtofont/src/utils");
const options = { ... };
createSVG(options) // SVG => SVG Font
.then(UnicodeObjChar => createTTF(options)) // SVG Font => TTF
.then(() => createEOT(options)) // TTF => EOT
.then(() => createWOFF(options)) // TTF => WOFF
.then(() => createWOFF2(options)) // TTF => WOFF2
.then(() => createSvgSymbol(options)) // SVG Files => SVG Symbol
svgtofont(options)
Type:
String
Default value:dist
svg path
Type:
String
Default value:svg
output path
Type:
String
Default value:iconfont
The font family name you want.
Type:
Number
Default value:10000
unicode start number
Type:
String
Default value: font name
Create font class name prefix, default value font name.
Type:
Boolean
Default value:false
Create CSS/LESS files, default true
.
This is the setting for svgicons2svgfont
Type:
String
Default value:'iconfont'
The font family name you want.
Type:
String
Default value: the options.fontName value
The font id you want.
Type:
String
Default value:''
The font style you want.
Type:
String
Default value:''
The font weight you want.
Type:
Boolean
Default value:false
Creates a monospace font of the width of the largest input icon.
Type:
Boolean
Default value:false
Calculate the bounds of a glyph and center it horizontally.
Type:
Boolean
Default value:false
Normalize icons by scaling them to the height of the highest icon.
Type:
Number
Default value:MAX(icons.height)
The outputted font height (defaults to the height of the highest input icon).
Type:
Number
Default value:10e12
Setup SVG path rounding.
Type:
Number
Default value:0
The font descent. It is useful to fix the font baseline yourself.
Warning: The descent is a positive value!
Type:
Number
Default value:fontHeight - descent
The font ascent. Use this options only if you know what you're doing. A suitable value for this is computed for you.
Type:
String
Default value:undefined
The font metadata. You can set any character data in but it is the be suited place for a copyright mention.
Type:
Function
Default value:console.log
Allows you to provide your own logging function. Set to function(){}
to
disable logging.
This is the setting for svg2ttf
Type:
String
copyright string
Type:
String
Unix timestamp (in seconds) to override creation time
Type:
Number
font version string, can be Version x.y
or x.y
.
Define preview web content. Example:
{
...
// website = null, no demo html files
website: {
title: "svgtofont",
logo: path.resolve(process.cwd(), "svg", "git.svg"),
version: pkg.version,
meta: {
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG",
favicon: "./favicon.png"
},
footerLinks: [
{
title: "GitHub",
url: "https://github.com/jaywcjlove/svgtofont"
},
{
title: "Feedback",
url: "https://github.com/jaywcjlove/svgtofont/issues"
},
{
title: "Font Class",
url: "index.html"
},
{
title: "Unicode",
url: "unicode.html"
}
]
}
}
Type:
String
Default value: index.ejs
Custom template can customize parameters. You can define your own template based on the default template.
{
website: {
template: path.join(process.cwd(), "my-template.ejs")
}
}
Type:
String
Default value:font-class
, Enum{font-class
,unicode
,symbol
}
Set default home page.
Suppose the font name is defined as svgtofont
, The default home page is unicode
, Will generate:
font-class.html
index.html
symbol.html
svgtofont.css
svgtofont.eot
svgtofont.less
svgtofont.svg
svgtofont.symbol.svg
svgtofont.ttf
svgtofont.woff
svgtofont.woff2
Preview demo font-class.html
, symbol.html
and index.html
. Automatically generated style svgtofont.css
and svgtofont.less
.
<svg class="icon" aria-hidden="true">
<use xlink:href="svgtofont.symbol.svg#svgtofont-git"></use>
</svg>
<style>
.iconfont {
font-family: "svgtofont-iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
<span class="iconfont"></span>
Support for .less
and .css
styles references.
<link rel="stylesheet" type="text/css" href="node_modules/fonts/svgtofont.css">
<i class="svgtofont-apple"></i>
Licensed under the MIT License.