一般情況我通過 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符號檔案。
3. 自動生成模板（例如css，less等），可以直接使用。
4. 自動生成預覽網站，預覽字型檔案。

安裝

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.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.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}

設定預設主頁。

Font Usage

假設字型名稱定義為 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.