Flutter图标字体生成插件icon_font_generator的使用

概述

icon_font_generator 包提供了一种简单的方法，可以将SVG图标转换为OpenType字体，并生成与Flutter兼容的类，该类包含图标的标识符（类似于 CupertinoIcons 或 Icons 类）。这个包完全用Dart编写，不需要任何外部依赖，兼容dart2js和dart2native。

字体生成

安装开发依赖

$ flutter pub add --dev icon_font_generator

# 然后运行：
$ flutter pub run icon_font_generator:generate <input-svg-dir> <output-font-file> [options]

全局激活包

$ pub global activate icon_font_generator

# 然后运行：
$ icon_font_generator <input-svg-dir> <output-font-file> [options]

必要的位置参数

• <input-svg-dir>：包含.svg文件的输入目录路径。
• <output-font-file>：输出字体文件路径，应具有.otf扩展名。

Flutter类选项

• -o 或 --output-class-file=<path>：包含图标标识符的Flutter兼容类的输出路径。
• -c 或 --class-name=<name>：生成类的名称。
• -p 或 --package=<name>：提供字体的包的名称。用于通过包依赖提供字体。
• --[no-]format：格式化生成的Dart代码。

字体选项

• -f 或 --font-name=<name>：生成字体的名称。
• --[no-]normalize：启用字体的字形规范化。如果每个图标大小和位置相同，则禁用此选项。（默认开启）
• --[no-]ignore-shapes：禁用SVG形状到路径的转换（circle, rect等）。（默认开启）

其他选项

• -z 或 --config-file=<path>：icon_font_generator yaml配置文件路径。默认使用pubspec.yaml和icon_font.yaml文件。
• -r 或 --recursive：递归查找.svg文件。
• -v 或 --verbose：显示所有日志信息。
• -h 或 --help：显示使用信息。

使用示例

$ icon_font_generator assets/svg/ fonts/my_icons_font.otf --output-class-file=lib/my_icons.dart -r

更新Flutter项目的pubspec.yaml：

flutter:
  fonts:
    - family: My Icons
      fonts:
        - asset: fonts/my_icons_font.otf

配置文件

icon_font_generator 的配置也可以放在yaml文件中。在 pubspec.yaml 或 icon_font.yaml 文件中添加 icon_font 部分：

icon_font:
  input_svg_dir: "assets/svg/"
  output_font_file: "fonts/my_icons_font.otf"
  
  output_class_file: "lib/my_icons.dart"
  class_name: "MyIcons"
  package: my_font_package
  format: true

  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使用的示例如下：

示例代码

import 'dart:io';
import 'package:icon_font_generator/icon_font_generator.dart';

void main() {
  const fontFileName = 'my_icons.otf';
  const classFileName = 'my_icons.dart';

  // 输入数据
  final svgMap = {
    'account_icon': '''<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15l-5-5h10l-5 5z"/></svg>'''
  };

  // 生成字体
  final svgToOtfResult = svgToOtf(
    svgMap: svgMap,
    fontName: 'My Icons',
  );

  // 将字体写入文件
  writeToFile(fontFileName, svgToOtfResult.font);

  // 生成Flutter类
  final generatedClass = generateFlutterClass(
    glyphList: svgToOtfResult.glyphList,
    familyName: svgToOtfResult.font.familyName,
    className: 'MyIcons',
    fontFileName: fontFileName,
  );

  // 将类内容写入文件
  File(classFileName).writeAsStringSync(generatedClass);
}

注意事项

• 生成的OpenType字体使用CFF表。
• 生成的字体使用PostScript表（post）3.0版本，即不包含字形名称。
• 支持的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文件名转换为Pascal命名法，并移除非允许字符。如果名称为空，则设置为’unamed’。如果名称已存在，则添加后缀 ‘_{i+1}’。

贡献

欢迎任何建议、问题和拉取请求。

许可证

MIT许可证

致谢

本软件是未维护包的分支：

• fontify

希望这篇文档能帮助你更好地理解和使用 icon_font_generator 插件。如果你有任何问题或需要进一步的帮助，请随时提问！