svgtofont
Advanced tools
Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font, Generator of fonts from SVG icons.
Install · Usage · Command · Font Usage · API · options · npm · License
Features:
WOFF2, WOFF, EOT, TTF and SVG.css, less and etc). ┌────────────────────┐
│ Project │
│ │
┌────────┐ │ ┌───────────┐ │
│iconfont│──┐ │ │ svg │──┐ │
└────────┘ │ ┌────────────┐ │ └───────────┘ │ │
├─▶│download svg│──▶│ ┌───────────┐ │ │
┌────────┐ │ └────────────┘ │┌──│create font│◀─┘ │
│icomoon │──┘ ││ └───────────┘ │
└────────┘ ││ ┌───────────┐ │
│└─▶│ use font │ │
│ └───────────┘ │
└────────────────────┘
Icon Font Created By svgtofont
npm run test in the root directory to see the results.npm i svgtofont
{
"scripts": {
"font": "svgtofont --sources ./svg --output ./font --fontName uiw-font"
},
}
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.
}).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:=>distfonts
The output directory.
Type:
Boolean
Default value:false
Output ./dist/react/, SVG generates react components.
git/git.svg
// ↓↓↓↓↓↓↓↓↓↓
import React from 'react';
export const Git = props => (
<svg viewBox="0 0 20 20" {...props}><path d="M2.6 10.59L8.38 4.8l1.69 -." fillRule="evenodd" /></svg>
);
Type:
Boolean
Default value:false
Output ./dist/svgtofont.json, The content is as follows:
{
"adobe": ["M14.868 3H23v19L14.868 3zM1 3h8.138L1 22V3zm.182 11.997H13.79l-1.551-3.82H8.447z...."],
"git": ["M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1..."],
"stylelint": ["M129.74 243.648c28-100.109 27.188-100.5.816c2.65..."]
}
Or you can generate the file separately:
const { generateIconsSource } = require('svgtofont/src/generate');
const path = require('path');
async function generate () {
const outPath = await generateIconsSource({
src: path.resolve(process.cwd(), 'svg'),
dist: path.resolve(process.cwd(), 'dist'),
fontName: 'svgtofont',
});
}
generate();
Type:
String
Default value:svg
output path
Type:
String
Default value:false
Clear output directory contents
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"
},
// Add a Github corner to your website
// Like: https://github.com/uiwjs/react-github-corners
corners: {
url: 'https://github.com/jaywcjlove/svgtofont',
width: 62, // default: 60
height: 62, // default: 60
bgColor: '#dc3545' // default: '#151513'
},
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"
}
]
}
}
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
svgtofont.css
svgtofont.eot
svgtofont.json
svgtofont.less
svgtofont.module.less
svgtofont.svg
svgtofont.symbol.svg
svgtofont.ttf
svgtofont.woff
svgtofont.woff2
symbol.html
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.
FAQs
Converts SVG to TTF/EOT/WOFF/WOFF2/SVG format fonts.
The npm package svgtofont receives a total of 21,230 weekly downloads. As such, svgtofont popularity was classified as popular.
We found that svgtofont demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.