非常方便的将 SVG 图标生成 TTF/EOT/WOFF/WOFF2/SVG 字体

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。

┌────────┐                                                       ┌────────────┐
│iconfont     │──┐                                                  │  Project           │
└────────┘   │   ┌────────────┐  ┌────────┐     │ ┌────────┐   │├─▶│created font       │─▶│download     │──▶│ │use font     │   │
┌────────┐   │   └────────────┘  └────────┘     │ └────────┘  │
│icomoon      │──┘                                                  └────────────┘
└────────┘

使用说明

图标字体只能被渲染成单色，不能生成 彩色图标。
图标将放到平台中维护，下载字体文件到项目中使用，这样团队维护生成字体成本将非常高。

通过图标平台网站下载 svg 图标，将图标放到项目中管理，通过 svgtofont.js 工具来生成它，这将是新的字体图标使用方式：

                                            ┌────────────────┐│      Project              ││                          │
┌────────┐                            │   ┌────────┐       │
│iconfont     │──┐                       │   │    svg      │───┐ │
└────────┘   │   ┌────────┐   │   └────────┘     │ │├─▶│download svg │─▶│   ┌─────────┐   │ │
┌────────┐   │   └────────┘   │┌─│create font    │◀─┘ │
│icomoon      │──┘                       ││  └─────────┘     │
└────────┘                            ││  ┌───────────┐  ││└─▶│ use font        │  ││   └───────────┘  │└────────────────┘

新的方式维护方式好处：

不需要知道第三方平台账号维护，将图标下载到项目中维护图标，不再维护字体文件
生成彩色图标文件 SVG Symbol 在项目中使用

svgtofont

读取一组 SVG图标并从SVG图标输出 TTF/EOT/WOFF/WOFF2/SVG 字体，字体生成器。

特性

支持的字体格式：WOFF2，WOFF，EOT，TTF和SVG。
支持 SVG Symbol 文件。
自动生成模板（例如css，less等），可以直接使用。
自动生成预览网站，预览字体文件。

实例

https://github.com/uiw-react/icons

https://github.com/uiw-react/file-icons

安装

npm i svgtofont

使用

简单的使用方式

const svgtofont = require("svgtofont");svgtofont({src: path.resolve(process.cwd(), "icon"), // svg 图标目录路径dist: path.resolve(process.cwd(), "fonts"), // 输出到指定目录中fontName: "svgtofont", // 设置字体名称css: true, // 生成字体文件
}).then(() => {console.log('done!');
});

高级用法

const svgtofont = require("svgtofont");
const path = require("path");svgtofont({src: path.resolve(process.cwd(), "icon"), // svg 图标目录路径dist: path.resolve(process.cwd(), "fonts"), // 输出到指定目录中fontName: "svgtofont", // 设置字体名称css: true, // 生成字体文件startNumber: 20000, // unicode起始编号svgicons2svgfont: {fontHeight: 1000,normalize: true},// website = null, 没有演示html文件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!');
});;

API

svgtofont 提供 API，可以一个一个的自己生成，也可以自动通过上面方法自动生成

const {createSVG,createTTF,createEOT,createWOFF,createWOFF2
} = 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

options

svgtofont(options)

dist

Type: String
Default value: dist

svg 图标路径

src

Type: String
Default value: svg

输出到指定目录

fontName

Type: String
Default value: iconfont

您想要的字体名称。

unicodeStart

Type: Number
Default value: 10000

unicode起始编号

clssaNamePrefix

Type: String
Default value: font name

创建字体类名称前缀，默认值字体名称。

css

Type: Boolean
Default value: false

创建CSS / LESS文件，默认为“true”。

svgicons2svgfont

这是 svgicons2svgfont 的设置

svgicons2svgfont.fontName

Type: String
Default value: 'iconfont'

您想要的字体名称，与前面 fontName 一样。

svgicons2svgfont.fontId

Type: String
Default value: the options.fontName value

你想要的字体ID。

svgicons2svgfont.fontStyle

Type: String
Default value: ''

你想要的字体样式。

svgicons2svgfont.fontWeight

Type: String
Default value: ''

你想要的字体粗细。

svgicons2svgfont.fixedWidth

Type: Boolean
Default value: false

创建最大输入图标宽度的等宽字体。

svgicons2svgfont.centerHorizontally

Type: Boolean
Default value: false

计算字形的边界并使其水平居中。

svgicons2svgfont.normalize

Type: Boolean
Default value: false

通过将图标缩放到最高图标的高度来标准化图标。

svgicons2svgfont.fontHeight

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

输出的字体高度（默认为最高输入图标的高度）。

svgicons2svgfont.round

Type: Number
Default value: 10e12

设置SVG路径舍入。

svgicons2svgfont.descent

Type: Number
Default value: 0

字体下降。自己修复字体基线很有用。

警告： 下降是一个正值！

svgicons2svgfont.ascent

Type: Number
Default value: fontHeight - descent

字体上升。仅当您知道自己在做什么时才使用此选项。为您计算一个合适的值。

svgicons2svgfont.metadata

Type: String
Default value: undefined

字体 metadata。你可以设置任何
字符数据，但它是适合提及版权的地方。

svgicons2svgfont.log

Type: Function
Default value: console.log

允许您提供自己的日志记录功能。设置为 function（）{} 禁用日志记录

svg2ttf

这是 svg2ttf 的设置

svg2ttf.copyright

Type: String

版权字符串

svg2ttf.ts

Type: String

用于覆盖创建时间的Unix时间戳（以秒为单位）

svg2ttf.version

Type: Number

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

website

定义预览Web内容。例：

{...// website = null, no demo html fileswebsite: {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"}]}
}

website.template

Type: String
Default value: index.ejs

自定义模板可自定义参数。您可以根据默认模板定义自己的模板。

{website: {template: path.join(process.cwd(), "my-template.ejs")}
}

website.index

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

设置默认主页。

字体使用

假设字体名称定义为 svgtofont，默认主页为unicode，将生成：

font-class.html
index.html
symbol.html
svgtofont.css
svgtofont.eot
svgtofont.less
svgtofont.svg
svgtofont.symbol.svg
svgtofont.ttf
svgtofont.woff
svgtofont.woff2

预览demo font-class.html, symbol.html 和 index.html。自动生成样式svgtofont.css 和 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

支持.less和.css样式引用。

<link rel="stylesheet" type="text/css" href="node_modules/fonts/svgtofont.css">
<i class="svgtofont-apple"></i>

License

Licensed under the MIT License.