svgtofont4wqfix
v1.0.1
Published
<p align="center"> <a href="https://github.com/jaywcjlove/svgtofont/"> <img src="https://user-images.githubusercontent.com/1680273/106147487-dfb22880-61b2-11eb-8462-4f443a4c2201.png" alt="SVG To Font" /> </a> </p>
Downloads
4
Readme
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
andSVG
. - 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
- file-icons File icons in the file tree.
- uiw-iconfont The premium icon font for @uiwjs Component Library.
- 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
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 => (
<svg viewBox="0 0 20 20" {...props}><path d="M2.6 10.59L8.38 4.8l1.69 -." fillRule="evenodd" /></svg>
);
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
<svg class="icon" aria-hidden="true">
<use xlink:href="svgtofont.symbol.svg#svgtofont-git"></use>
</svg>
Unicode
<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>
Class Name
Support for .less
and .css
styles references.
<link rel="stylesheet" type="text/css" href="node_modules/fonts/svgtofont.css">
<i class="svgtofont-apple"></i>
License
Licensed under the MIT License.