Fontify
Fontify 包提供了一种简单的方式将 SVG 图标转换为 OpenType 字体,并生成与 Flutter 兼容的类,其中包含图标的标识符(就像 CupertinoIcons 或 Icons 类一样)。
该软件包完全用 Dart 编写,不需要任何外部依赖。兼容 dart2js 和 dart2native。
使用 CLI 工具
全局激活 该包
$ pub global activate fontify
然后就可以使用了
$ fontify <input-svg-dir> <output-font-file> [options]
必需的位置参数
<input-svg-dir>
包含 .svg 文件的输入目录路径。<output-font-file>
输出字体文件的路径。应具有 .otf 扩展名。
Flutter 类选项
-o或--output-class-file=<path>
包含图标标识符的 Flutter 兼容类的输出路径。-i或--indent=<indent>
Flutter 类文件的前导缩进空格数。
(默认为 "2")-c或--class-name=<name>
生成类的名称。-p或--package=<name>
提供字体的包的名称。用于通过包依赖项提供字体。
字体选项
-f或--font-name=<name>
生成字体的名称。--[no-]normalize
启用字体的字形标准化。
如果每个图标的大小和位置都相同,请禁用此选项。
(默认为启用)--[no-]ignore-shapes
禁用 SVG 形状到路径的转换(圆、矩形等)。
(默认为启用)
其他选项
-z或--config-file=<path>
Fontify yaml 配置文件路径。
默认使用 pubspec.yaml 和 fontify.yaml 文件。-r或--recursive
递归查找 .svg 文件。-v或--verbose
显示所有日志消息。-h或--help
显示用法信息。
使用示例
$ fontify assets/svg/ fonts/my_icons_font.otf --output-class-file=lib/my_icons.dart --indent=4 -r
更新 Flutter 项目的 pubspec.yaml
...
flutter:
fonts:
- family: Fontify Icons
fonts:
- asset: fonts/my_icons_font.otf
CLI 工具配置文件
Fontify 的配置也可以放在 yaml 文件中。
将 fontify 部分添加到 pubspec.yaml 或 fontify.yaml 文件中
fontify:
input_svg_dir: "assets/svg/"
output_font_file: "fonts/my_icons_font.otf"
output_class_file: "lib/my_icons.dart"
class_name: "MyIcons"
indent: 4
package: my_font_package
font_name: "My Icons"
normalize: true
ignore_shapes: true
recursive: true
verbose: false
input_svg_dir 和 output_font_file 键是必需的。
可以使用 --config-file 选项指定任何其他配置文件。
使用 API
可以使用 svgToOtf 和 generateFlutterClass 函数来生成字体和 Flutter 类。
API 用法的示例位于 example 文件夹。
注意事项
- 生成的 OpenType 字体使用 CFF 表。
- 生成的字体使用 3.0 版的 PostScript 表 (post),即不包含字形名称。
- 支持的 SVG 元素:path, g, circle, rect, polyline, polygon, line。
- SVG 变换根据规范应用于路径。
- SVG
<g>元素的子元素会扩展到根目录并应用变换。
有关组的其他任何内容都会被忽略,不支持组引用。 - 请考虑使用 [非零填充规则][]。
- 当
ignoreShapes设置为 false 时,
每个 SVG 形状(circle、rect 等)的轮廓都会转换为路径。
请注意,"fill" 或 "stroke" 等任何属性都会被忽略,只使用轮廓,
因此生成的字形可能与 SVG 图标不同。
建议将 SVG 中的每个元素都转换为路径。 - 当
normalize设置为 false 时,建议 SVG 图标具有相同的高度。
否则,最终结果可能不如预期。 - 生成 Flutter 类时,静态变量名来自 SVG 文件名
转换为 PascalCase 并删除不允许的字符。
如果名称为空,则设置为 'unnamed'。
如果名称已存在,则添加后缀 '_{i+1}'。