之前使用 iconfont 是非常方便的，上传之后立马生效，项目里面直接引用即可，但是现在因为政策的收紧，每次上传图标都要等待十几分钟二十分钟的审核时间，这怎么能忍，有这个时间我都能写一个页面了好吧。

忍受不了就自己做，说干就干，于是我写了一个 svg 转图标字体的脚手架，所有的内容都自己维护，不再受制于人，感觉就是爽。

svg2font: 一个高效的 SVG 图标字体生成工具

github.com/tenadolante…

在现代 Web 开发中，使用图标是一种常见的做法。图标不仅能美化界面，还能提高可用性和可访问性。传统上，我们使用图片文件(如 PNG、JPG 等)来显示图标，但这种方式存在一些缺陷，例如图片文件较大、不能任意缩放、无法通过 CSS 设置颜色等。相比之下，使用字体图标具有许多优势，如文件体积小、可无限缩放、可通过 CSS 设置颜色和阴影等。

svg2font 就是一个用于将 SVG 图标转换为字体图标的工具，它可以帮助我们轻松地在项目中集成和使用字体图标。本文将详细介绍 svg2font 的使用方法、应用场景和注意事项。

安装

svg2font 是一个基于 Node.js 的命令行工具，因此需要先安装 Node.js 环境。安装完成后，可以使用 npm 或 yarn 在项目中安装 svg2font:

# 使用npm

npm install @tenado/svg2font -D

# 使用yarn

yarn add @tenado/svg2font -D

初始化配置

安装完成后，需要初始化 svg2font 的配置文件。在项目根目录执行以下命令:

npx svg2font init

该命令会在项目根目录下生成一个 svg2font.config.js 文件，内容如下:

module.exports = {
inputPath: "src/assets/svgs", // SVG图标文件夹路径
outputPath: "src/assets/font", // 生成字体文件的输出路径
fontFamily: "tenadoIcon", // 字体名称
fontPrefix: "", // 字体前缀

};

你可以根据实际需求修改这些配置项。

生成字体图标

配置完成后，就可以执行以下命令生成字体图标了:

npx svg2font sync

该命令会读取 inputPath 指定的 SVG 图标文件夹，将其中的 SVG 文件转换为字体文件(包括.eot、.ttf、.woff、.woff2 等格式)，并输出到 outputPath 指定的路径下。同时，它还会生成一个 config.json 文件，记录了每个图标的 Unicode 编码和 CSS 类名。

在项目中使用字体图标

生成字体文件后，需要在项目中引入相应的 CSS 文件，才能正常使用字体图标。svg2font 会自动生成一个 index.min.css 文件，包含了所有字体图标的 CSS 定义。你可以在项目的入口文件(如 main.js)中导入该 CSS 文件:

import "./src/assets/font/index.min.css";

之后，你就可以在 HTML 中使用字体图标了。例如，如果你有一个名为 ticon-color-pick 的图标，可以这样使用:

<span class="ticon-color-pick"></span>

查看图标列表

如果你想查看当前项目包含的所有图标，可以执行以下命令:

npx svg2font example

该命令会根据 config.json 文件生成一个静态 HTML 页面，列出了所有图标及其对应的 CSS 类名和 Unicode 编码。它还会启动一个本地服务器，方便你在浏览器中预览这个页面。

注意事项

使用 svg2font 时，需要注意以下几点:

1.SVG 文件命名: 确保 SVG 文件名不包含特殊字符或空格，否则可能会导致生成字体时出错。

2.SVG 文件优化: 在将 SVG 文件转换为字体之前，建议先对 SVG 文件进行优化，以减小文件大小。你可以使用工具如 SVGO 或 SVG Optimizer 来优化 SVG 文件。

3.字体支持:不同浏览器和操作系统对字体格式的支持程度不同。为了最大程度地兼容各种环境，svg2font 会生成多种字体格式(.eot、.ttf、.woff、.woff2 等)。

4.字体缓存: 浏览器会缓存字体文件，因此在更新字体图标时，需要确保浏览器加载了最新的字体文件。你可以在 CSS 文件中为字体文件添加版本号或时间戳，以强制浏览器重新加载字体文件。

总结

svg2font 是一个功能强大且易于使用的 SVG 图标字体生成工具。它可以帮助你轻松地将 SVG 图标转换为字体格式，并在 Web 应用程序、跨平台应用程序或图标库中使用这些字体图标。通过使用 svg2font，你可以提高页面性能、确保图标显示一致性，并享受字体图标带来的诸多优势。

无论你是 Web 开发人员、移动应用程序开发人员，还是 UI 设计师，svg2font 都值得一试。它简单易用，且具有丰富的功能和配置选项，可以满足不同项目的需求。快来试试 svg2font，让你的项目与众不同吧!