svgtofont

^{Using my app is also a way to support me:}

Free Font

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, TTF and SVG.
- Support SVG Symbol file.
- Support React, ReactNative, Vue & TypeScript.
- Support Less/Sass/Stylus.
- Allows to use custom templates (example css, less and etc).
- Automatically generate a preview site.

``bash
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ Project ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
╭┈┈┈┈┈┈┈┈╮ ┆ ┆ svg ┆┈┈╮ ┆
┆iconfont┆┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆
╰┈┈┈┈┈┈┈┈╯ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆
├┈▶┆download svg┆┈┈▶┆ ┆┈svgtofont┈┆ ┆ ┆
╭┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆╭┈┈┆create font┆◀┈╯ ┆
┆icomoon ┆┈┈╯ ┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈╯ ┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆╰┈▶┆ use font ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
`

`mermaid
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[svgtofont 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 test in the root directory to see the results.

Install

`bash
npm i svgtofont
`

> [!NOTE]
> This package v5+ is ESM only: Node 18+ is needed to use it and it must be import instead of require.
> `js
> import svgtofont from 'svgtofont';
> `

#### Using With Command

`json
{
"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.

`js
{
"fontName": "svgtofont",
"css": true
}
`

`js
/**
* @type {import('svgtofont').SvgToFontOptions}
*/
export default {
fontName: "iconfont",
}
`

#### Using With Nodejs

> [!NOTE]
> This package v5+ is now pure ESM. Please read this.

`js
import svgtofont from 'svgtofont';
import path from 'node:path';

svgtofont({
src: path.resolve(process.cwd(), 'icon'), // svg path, only searches one level, not recursive
dist: path.resolve(process.cwd(), 'fonts'), // output path
fontName: 'svgtofont', // font name
css: true, // Create CSS files.
}).then(() => {
console.log('done!');
});
`

Or

`js
import svgtofont from 'svgtofont';
import path from 'node:path';

svgtofont({
src: path.resolve(process.cwd(), "icon"), // svg path, only searches one level, not recursive
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 open-sourced
}
}).then(() => {
console.log('done!');
});;
`

API

`js
import { createSVG, createTTF, createEOT, createWOFF, createWOFF2, createSvgSymbol, copyTemplate, createHTML } from 'svgtofont/lib/utils';

const options = { ... };

async function createFont() {
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
}
`

options

> svgtofont(options)

$3

> Type: config?: AutoConfOption

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.

$3

> Type: Boolean

A value of false disables logging

$3

> Type: (msg) => void

log callback function

$3

> Type: String
> Default value: ~~dist~~ => fonts

The output directory.

$3

> Type: Boolean
> Default value: false

Output ./dist/react/, SVG generates react components.

`js
git/git.svg

// ↓↓↓↓↓↓↓↓↓↓

import React from 'react';
export const Git = props => (

);
`

$3

> Type: Boolean
> Default value: false

Output ./dist/reactNative/, SVG generates reactNative components.

`js
import { Text } from 'react-native';

const icons = { "Git": "__GitUnicodeChar__", "Adobe": "__AdobeUnicodeChar__" };

export const RangeIconFont = props => {
const { name, ...rest } = props;
return (
{icons[name]}
);
};

`

$3

> Type: Boolean
> Default value: false

Output ./dist/vue/, SVG generates vue components.

`js
git/git.svg

// ↓↓↓↓↓↓↓↓↓↓

import { defineComponent, h } from 'vue';

export const Git = defineComponent({
name: 'Git',
props: {
class: {
type: String,
default: ''
}
},
setup(props, { attrs }) {
return () => h(
'svg',
{
viewBox: '0 0 20 20',
width: undefined,
height: undefined,
class: svgtofont ${props.class},
...attrs
},
[]
);
}
});

`

$3

> Type: Boolean
> Default value: false

Output ./dist/svgtofont.json, The content is as follows:

`js
{
"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:

`js
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();
`

$3

> Type: Boolean
> Default value: false

Output ./dist/info.json, The content is as follows:

`js
{
"adobe": {
"encodedCode": "\\ea01",
"prefix": "svgtofont",
"className": "svgtofont-adobe",
"unicode": ""
},
...
}
`

$3

> Type: String
> Default value: svg

output path

$3

> Type: String
> Default value: false

Clear output directory contents

$3

> Type: String
> Default value: iconfont

The font family name you want.

$3

> Type: String
> Default 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

$3

> Type: Number
> Default value: 0xea01

unicode start number

$3

Get Icon Unicode

`ts
getIconUnicode?: (name: string, unicode: string, startUnicode: number)
=> [string, number];
`

$3

> 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.
`js
{
...
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.
`css
.icons {
font-family: 'your-font-icon-name' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
`
`html
add
`
as you add more svgs and process them into your font you would just use the same pattern.
`html
add
remove
edit
`

$3

> Type: Boolean
> Default value: false

adds possibility to use name (file name) in addition to codepoints. adds support of ligatures.

let's say you have some svgs and you want to use codepoints but for some of them for example with a file name of add you want to use ligatures for it. this option only adds ligatures and still allows for using codepoints as usual. this is in contrary to useNameAsUnicode which basically removes support for codepoints in favour of ligatures.
`js
{
...
addLigatures: true
}
`

$3

> Type: Boolean
> Default value: false

consoles whenever {{ cssString }} template outputs unicode characters or css vars

$3

> Type: String
> Default value: font name

Create font class name prefix, default value font name.

$3

> Type: Boolean|CSSOptions
> Default value: false

Create CSS/LESS files, default true.

`ts
type CSSOptions = {
/**
* Output the css file to the specified directory
*/
output?: string;
/**
* Which files are exported.
*/
include?: RegExp;
/**
* Setting font size.
*/
fontSize?: string | boolean;
/**
* 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;
/**
* When including CSS files in a CSS file,
* you can add a timestamp parameter or custom text to the file path to prevent browser caching issues and ensure style updates are applied. @default true
* @example path/to/iconfont.css?t=1612345678
*/
hasTimestamp?: boolean | string;
}
`

$3

This is the setting for svgicons2svgfont


#### svgicons2svgfont.fontName

> Type: String
> Default value: 'iconfont'

The font family name you want.

#### svgicons2svgfont.fontId

> Type: String
> Default value: the options.fontName value

The font id you want.

#### svgicons2svgfont.fontStyle

> Type: String
> Default value: ''

The font style you want.

#### svgicons2svgfont.fontWeight

> Type: String
> Default value: ''

The font weight you want.

#### svgicons2svgfont.fixedWidth

> Type: Boolean
> Default value: false

Creates a monospace font of the width of the largest input icon.

#### svgicons2svgfont.centerHorizontally

> Type: Boolean
> Default value: false

Calculate the bounds of a glyph and center it horizontally.

#### svgicons2svgfont.normalize

> Type: Boolean
> Default value: false

Normalize icons by scaling them to the height of the highest icon.

#### svgicons2svgfont.fontHeight

> Type: Number
> Default value: MAX(icons.height)

The outputted font height (defaults to the height of the highest input icon).

#### svgicons2svgfont.round

> Type: Number
> Default value: 10e12

Setup SVG path rounding.

#### svgicons2svgfont.descent

> Type: Number
> Default value: 0

The font descent. It is useful to fix the font baseline yourself.

Warning: The descent is a positive value!

#### svgicons2svgfont.ascent

> 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.

#### svgicons2svgfont.metadata

> 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.

#### svgicons2svgfont.log

> Type: Function
> Default value: console.log

Allows you to provide your own logging function. Set to function(){} to
disable logging.

$3

> Type: OptimizeOptions
> Default value: undefined

Some options can be configured with svgoOptions though it. svgo

$3

This is the setting for svg2ttf

#### svg2ttf.copyright

> Type: String

copyright string

#### svg2ttf.ts

> Type: String

Unix timestamp (in seconds) to override creation time

#### svg2ttf.version

> Type: Number

font version string, can be Version x.y or x.y.

$3

Define preview web content. Example:

`js
{
...
// 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"
}
]
}
}
`

#### website.template

> Type: String
> Default value: index.njk

Custom template can customize parameters. You can define your own template based on the default template.

`js
{
website: {
template: path.join(process.cwd(), "my-template.njk")
}
}
`
#### website.index

> Type: String
> Default value: font-class, Enum{font-class, unicode, symbol}

Set default home page.

Font Usage

Suppose the font name is defined as svgtofont, The default home page is unicode, Will generate:

`bash
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.html
`

Preview demo font-class.html, symbol.html and index.html. Automatically generated style svgtofont.css and svgtofont.less.

$3

`xml



`

$3

`html


`

$3

Support for .less and .css styles references.

`html


`

$3

Icons are used as components. v3.16.7+ support.

`jsx
import { Adobe, Alipay } from '@uiw/icons';



`

#### In the project created by create-react-app

`jsx
import logo from './logo.svg';


`

`jsx
import { ReactComponent as ComLogo } from './logo.svg';


`

#### In the project created by webpack

`bash
yarn add babel-plugin-named-asset-import
yarn add @svgr/webpack
`

`js
// webpack.config.js
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
`

`jsx
import { ReactComponent as ComLogo } from './logo.svg';


`

$3

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

`jsx
SvgToFont.jsx
// ↓↓↓↓↓↓↓↓↓↓

import { SvgToFont } from './SvgToFont';


`
`ts
SvgToFont.d.ts
// ↓↓↓↓↓↓↓↓↓↓

import { TextStyle } from 'react-native';

export type SvgToFontIconNames = 'git'| 'adobe'| 'demo' | 'left' | 'styleInline'

export interface SvgToFontProps extends Omit {
iconName: SvgToFontIconNames
}

export declare const SvgToFont: (props: SvgToFontProps) => JSX.Element;
`

$3

Icons are used as components. v3+ support.

`vue



``

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.