SVG到字体转换工具使用教程

SVG到字体转换工具使用教程

svgtofont Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font. 项目地址: https://gitcode.com/gh_mirrors/sv/svgtofont

1. 项目的目录结构及介绍

svgtofont 项目是一个用于将 SVG 图标转换为字体格式的工具。以下是项目的目录结构及其功能的简要介绍：

svgtofont/
├── .github/              # GitHub 相关的文件
├── .gitignore            # Git 忽略文件列表
├── .npmignore            # npm 忽略文件列表
├── examples/             # 示例文件和项目
├── src/                  # 源代码目录
├── test/                 # 测试文件目录
├── .editorconfig          # 编辑器配置文件
├── LICENSE               # MIT 许可证文件
├── README.md             # 项目说明文件
├── package.json          # 项目配置文件
├── renovate.json          # 自动更新配置文件
└── tsconfig.json         # TypeScript 配置文件

2. 项目的启动文件介绍

svgtofont 的启动和配置主要通过 package.json 文件中的脚本进行。以下是 package.json 中的关键部分：

"scripts": {
  "build": "svgtofont --sources ./svg --output ./font --fontName uiw-font",
  "test": "jest"
}

• build: 这个脚本是用来构建字体的主要命令。它会从 ./svg 目录读取 SVG 文件，并将生成的字体输出到 ./font 目录，字体名称为 uiw-font。
• test: 这个脚本是用来运行测试的。

要启动项目，你可以在项目根目录下运行以下命令：

npm run build

3. 项目的配置文件介绍

svgtofont 的配置文件主要包括 .editorconfig 和 package.json 中的配置部分。

• .editorconfig: 这个文件用于定义项目的编码风格，比如缩进、换行符等，以确保所有开发者的代码风格保持一致。

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

• package.json: 这个文件中包含了项目的配置信息，包括项目的名称、版本、描述、入口文件、依赖、脚本等。在 svgtofont 中，你可以在 config 字段下添加自定义配置，例如：

"config": {
  "fontName": "custom-font",
  "css": true
}

在这里，fontName 用于指定生成的字体名称，css 表示是否生成相应的 CSS 文件。

要使用自定义配置，你需要在运行 svgtofont 命令时指定配置文件：

svgtofont --config ./path/to/config.json

svgtofont Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font. 项目地址: https://gitcode.com/gh_mirrors/sv/svgtofont