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:
- Supported font formats:
WOFF2,WOFF,EOT,TTFandSVG. - Support SVG Symbol file.
- Support
React,ReactNative&TypeScript. - Support
Less/Sass/Stylus. - Allows to use custom templates (example
css,lessand etc). - Automatically generate a preview site.
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ Project ┆
┆ ┆
╭┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆iconfont┆┈┈╮ ┆ ┆ svg ┆┈┈╮ ┆
╰┈┈┈┈┈┈┈┈╯ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆
├┈▶┆download svg┆┈┈▶┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆
╭┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆╭┈┈┆create font┆◀┈╯ ┆
┆icomoon ┆┈┈╯ ┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈╯ ┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆╰┈▶┆ use font ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯graph LR;
A[iconfont]-->C[Download SVG];
B[icomoon]-->C;
D[icongo]-->C;
E[yesicon]-->C;
click A "https://www.iconfont.cn" "阿里巴巴矢量图标库" _blank
click B "https://icomoon.io" "Pixel Perfect Icon Solutions" _blank
click D "https://icongo.github.io" "Include popular icons in your React projects easily icons." _blank
click E "https://yesicon.app/" "216,162 High-Quality Vector Icons from Top Design Teams." _blank
C .-> ide1
subgraph ide1 [Project]
svg -->a2[create font]
a2 .-> b3[use font]
end
Icon Font Created By svgtofont
- file-icons File icons in the file tree.
- uiw-iconfont The premium icon font for @uiwjs Component Library. Support
React&TypeScript. - Bootstrap Icons Font Official open source SVG icon library for Bootstrap.
- test example For a simple test example, run
npm run testin the root directory to see the results.
npm i svgtofont{
"scripts": {
"font": "svgtofont --sources ./svg --output ./font --fontName uiw-font"
},
"svgtofont": {
"css": {
"fontSize": "12px"
}
}
}You can add configuration to package.json. #48
Support for .svgtofontrc and more configuration files.
{
"fontName": "svgtofont",
"css": true
}/**
* @type {import('svgtofont').SvgToFontOptions}
*/
export default {
fontName: "iconfont",
}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
styleTemplates: path.resolve(rootPath, "styles"), // file templates path (optional)
fontName: "svgtofont", // font name
css: true, // Create CSS files.
startUnicode: 0xea01, // 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: ``,
// 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"
}
],
footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>`
}
}).then(() => {
console.log('done!');
});;import { createSVG, createTTF, createEOT, createWOFF, createWOFF2, createSvgSymbol, copyTemplate, createHTML } from 'svgtofont/lib/utils';
const options = { ... };
async function creatFont() {
const unicodeObject = await createSVG(options);
const ttf = await createTTF(options); // SVG Font => TTF
await createEOT(options, ttf); // TTF => EOT
await createWOFF(options, ttf); // TTF => WOFF
await createWOFF2(options, ttf); // TTF => WOFF2
await createSvgSymbol(options); // SVG Files => SVG Symbol
}svgtofont(options)
Type:
config?: AutoConfOption<SvgToFontOptions>
By default, settings are automatically loaded from .svgtofontrc and package.json. You can add configuration to package.json. #48
Support for .svgtofontrc and more configuration files.
Type:
Boolean
A value of false disables logging
Type:
(msg) => void
log callback function
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/reactNative/, SVG generates reactNative components.
import { Text } from 'react-native';
const icons = { "Git": "__GitUnicodeChar__", "Adobe": "__AdobeUnicodeChar__" };
export const RangeIconFont = props => {
const { name, ...rest } = props;
return (<Text style={{ fontFamily: 'svgtofont', fontSize: 16, color: '#000000', ...rest }}>
{icons[name]}
</Text>);
};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:
Boolean
Default value:false
Output ./dist/info.json, The content is as follows:
{
"adobe": {
"encodedCode": "\\ea01",
"prefix": "svgtofont",
"className": "svgtofont-adobe",
"unicode": ""
},
...
}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:
StringDefault value:undefined
The path of the templates, see src/styles or test/templates/styles to get reference about
how to create a template, file names can have the extension .template, like a filename.scss.template
Type:
Number
Default value:0xea01
unicode start number
Get Icon Unicode
getIconUnicode?: (name: string, unicode: string, startUnicode: number)
=> [string, number];Type:
Boolean
Default value:false
should the name(file name) be used as unicode? this switch allows for the support of ligatures.
let's say you have an svg with a file name of add and you want to use ligatures for it. you would set up your processing as mentioned above and turn on this switch.
{
...
useNameAsUnicode: true
}while processing, instead of using a single sequential char for the unicode, it uses the file name. using the file name as the unicode allows the following code to work as expected.
.icons {
font-family: 'your-font-icon-name' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}<i class="icons">add</i>as you add more svgs and process them into your font you would just use the same pattern.
<i class="icons">add</i>
<i class="icons">remove</i>
<i class="icons">edit</i>Type:
Boolean
Default value:false
consoles whenever {{ cssString }} template outputs unicode characters or css vars
Type:
String
Default value: font name
Create font class name prefix, default value font name.
Type:
Boolean|CSSOptions
Default value:false
Create CSS/LESS files, default true.
type CSSOptions = {
/**
* Output the css file to the specified directory
*/
output?: string;
/**
* Which files are exported.
*/
include?: RegExp;
/**
* Setting font size.
*/
fontSize?: string;
/**
* Set the path in the css file
* https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
*/
cssPath?: string
/**
* Set file name
* https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
*/
fileName?: string
/**
* Ad hoc template variables.
*/
templateVars?: Record<string, any>;
}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.
Type:
OptimizeOptionsDefault value:undefined
Some options can be configured with svgoOptions though it. svgo
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.scss
svgtofont.styl
svgtofont.svg
svgtofont.symbol.svg
svgtofont.ttf
svgtofont.woff
svgtofont.woff2
symbol.htmlPreview 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>Icons are used as components. v3.16.7+ support.
import { Adobe, Alipay } from '@uiw/icons';
<Adobe style={{ fill: 'red' }} />
<Alipay height="36" />In the project created by create-react-app
import logo from './logo.svg';
<img src={logo} />import { ReactComponent as ComLogo } from './logo.svg';
<ComLogo />In the project created by webpack
yarn add babel-plugin-named-asset-import
yarn add @svgr/webpack// webpack.config.js
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],import { ReactComponent as ComLogo } from './logo.svg';
<ComLogo />A unique component named after the font name is generated.
Props are TextProps and are used as inline style.
In addition, the iconName prop is mandatory and refers to svg names written in camelCase
SvgToFont.jsx
// ↓↓↓↓↓↓↓↓↓↓
import { SvgToFont } from './SvgToFont';
<SvgToFont fontSize={32} color="#fefefe" iconName={"git"} />SvgToFont.d.ts
// ↓↓↓↓↓↓↓↓↓↓
import { TextStyle } from 'react-native';
export type SvgToFontIconNames = 'git'| 'adobe'| 'demo' | 'left' | 'styleInline'
export interface SvgToFontProps extends Omit<TextStyle, 'fontFamily' | 'fontStyle' | 'fontWeight'> {
iconName: SvgToFontIconNames
}
export declare const SvgToFont: (props: SvgToFontProps) => JSX.Element;As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent