svgtofont.js 自动生成图标字体和彩色图标文件

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

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

使用说明

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

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

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

新的方式维护方式好处:

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

svgtofont

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

特性

  1. 支持的字体格式:WOFF2,WOFF,EOT,TTF和SVG。
  2. 支持 SVG Symbol 文件。
  3. 自动生成模板(例如css,less等),可以直接使用。
  4. 自动生成预览网站,预览字体文件。

实例

https://github.com/uiwjs/icons

图片描述

https://github.com/uiwjs/file...

图片描述

安装

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 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.htmlindex.html。自动生成样式svgtofont.csssvgtofont.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.


小弟调调
[链接]

小弟调调要埋名啦

8.3k 声望
2k 粉丝
0 条评论
推荐阅读
macOS包管理器 Homebrew 备忘清单
Homebrew 是 macOS(或Linux)缺少的包管理器,备忘清单包含 brew 命令的使用与安装在线预览: [链接]开源仓库:[链接]安装 {代码...} 加速安装和更新,将仓库源码通过 gitee 同步到国内,这样速度杠杠的 {代码...}...

小弟调调1阅读 1.1k

封面图
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan47阅读 3.3k评论 14

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.7k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图

小弟调调要埋名啦

8.3k 声望
2k 粉丝
宣传栏