非常方便的将 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

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

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

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

安装

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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >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:

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

警告：下降是一个正值！

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

x.y

website

定义预览Web内容。例：

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

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">&#59907;</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.

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

使用说明

svgtofont

实例

安装

使用

高级用法

API

options

dist

src

fontName

unicodeStart

clssaNamePrefix

css

svgicons2svgfont

svgicons2svgfont.fontName

svgicons2svgfont.fontId

svgicons2svgfont.fontStyle

svgicons2svgfont.fontWeight

svgicons2svgfont.fixedWidth

svgicons2svgfont.centerHorizontally

svgicons2svgfont.normalize

svgicons2svgfont.fontHeight

svgicons2svgfont.round

svgicons2svgfont.descent

svgicons2svgfont.ascent

svgicons2svgfont.metadata

svgicons2svgfont.log

svg2ttf

svg2ttf.copyright

svg2ttf.ts

svg2ttf.version

website

website.template

website.index

字体使用

symbol svg

Unicode

Class Name

License

继续阅读