同步操作将从 小弟调调/svgtofont 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font, Generator of fonts from SVG icons.
Install · Usage · Font Usage · API · options · npm · License
Features:
WOFF2
, WOFF
, EOT
, TTF
and SVG
.css
, less
and etc).Icon Font Created By svgtofont
npm run test
in the root directory to see the results.npm i svgtofont
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:=>dist
fonts
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"
},
footerLinks: [
{
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.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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。