Need help with svgtofont?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jaywcjlove
192 Stars 36 Forks MIT License 296 Commits 23 Opened issues

Description

Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font.

Services available

!
?

Need anything else?

Contributors list

# 121
JavaScr...
HTML
Chrome
express...
199 commits
# 26
netlify
TypeScr...
GraphQL
javascr...
58 commits
# 262,978
React
iOS
React N...
Shell
3 commits
# 821
GitHub
rust-la...
wechat-...
query-l...
3 commits
# 195,860
Git
Shell
TypeScr...
CSS
1 commit
# 28,848
kali-li...
tpu
progres...
fronten...
1 commit

SVG To Font

Build & Deploy Coverage Status Gitee Repo Open in unpkg NPM Download npm version

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
    Less
    /
    Sass
    /
    Stylus
    .
  • Allows to use custom templates (example
    css
    ,
    less
    and etc).
  • Automatically generate a preview site.
                                ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
                                ┆      Project       ┆
                                ┆                    ┆
╭┈┈┈┈┈┈┈┈╮                      ┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆
┆iconfont┆┈┈╮                   ┆   ┆    svg    ┆┈┈╮ ┆
╰┈┈┈┈┈┈┈┈╯  ┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈╮   ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯  ┆ ┆
            ├┈▶┆download svg┆┈┈▶┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮  ┆ ┆
╭┈┈┈┈┈┈┈┈╮  ┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈╯   ┆╭┈┈┆create font┆◀┈╯ ┆
┆icomoon ┆┈┈╯                   ┆┆  ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆
╰┈┈┈┈┈┈┈┈╯                      ┆┆  ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆
                                ┆╰┈▶┆ use font  ┆    ┆
                                ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆
                                ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

Icon Font Created By svgtofont

Install

npm i svgtofont

Using With Command

{
  "scripts": {
    "font": "svgtofont --sources ./svg --output ./font --fontName uiw-font"
  },
}

You can add configuration to package.json. #48

Using With Nodejs

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!'); });;

API

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 }

options

svgtofont(options)

dist

Type:

String

Default value: ~~
dist
~~ =>
fonts

The output directory.

outSVGReact

Type:

Boolean

Default value:
false

Output

./dist/react/
, SVG generates
react
components.
git/git.svg

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

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

outSVGPath

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

src

Type:

String

Default value:
svg

output path

emptyDist

Type:

String

Default value:
false

Clear output directory contents

fontName

Type:

String

Default value:
iconfont

The font family name you want.

styleTemplates

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

startUnicode

Type:

Number

Default value:
0xea01

unicode start number

classNamePrefix

Type:

String

Default value: font name

Create font class name prefix, default value font name.

css

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
}

svgicons2svgfont

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.

svgoOptions

Type:

OptimizeOptions
Default value:
undefined

Some options can be configured with

svgoOptions
though it. svgo

svg2ttf

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
.

website

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"
      }
    ]
  }
}

website.template

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")
  }
}

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

symbol svg

  

Unicode


Class Name

Support for

.less
and
.css
styles references.

Using With React

In the project created by create-react-app

import logo from './logo.svg';


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

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';

License

Licensed under the MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.