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.yamlfontify.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_diroutput_font_file 键是必需的。
可以使用 --config-file 选项指定任何其他配置文件。

使用 API

可以使用 svgToOtfgenerateFlutterClass 函数来生成字体和 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}'。

GitHub

https://github.com/westracer/fontify