YX Icon Fonts

从 iconfont.json 生成 Flutter IconData 常量的 Dart CLI 工具。

特性

• 🎨 解析 iconfont.cn 导出的 JSON 文件
• 📝 生成类型安全的 Flutter IconData 常量
• ⚙️ YAML 配置文件支持
• 🏗️ 自定义类名和输出路径
• 📚 自动生成文档注释

安装

在您的 Flutter 项目的 pubspec.yaml 中添加为开发依赖：

dev_dependencies:
  yx_icon_fonts:
    git:
      url: https://gitea.23544.com/wangyang/yx_icon_fonts_flutter
      ref: v2.0.0

然后运行：

dart pub get

快速开始

1. 初始化配置文件

dart run yx_icon_fonts init

这将在项目根目录创建 icon_generator_config.yaml 配置模板。

2. 准备资源文件

从 iconfont.cn 下载您的图标项目，将以下文件放到项目中：

• iconfont.ttf - 字体文件
• iconfont.json - 图标配置文件

3. 配置 pubspec.yaml

在 pubspec.yaml 中注册字体：

flutter:
  fonts:
    - family: iconfont
      fonts:
        - asset: assets/fonts/iconfont.ttf

4. 编辑配置文件

修改 icon_generator_config.yaml：

input:
  font_file: "assets/fonts/iconfont.ttf"
  json_file: "assets/fonts/iconfont.json"
  font_family: "iconfont"

output:
  file_path: "lib/generated/icons.dart"
  class_name: "AppIcons"

5. 生成代码

dart run yx_icon_fonts generate

6. 使用生成的图标

import 'package:your_app/generated/icons.dart';

// 在 Widget 中使用
Icon(AppIcons.iconHome, size: 24, color: Colors.blue)

// 在 IconButton 中使用
IconButton(
  icon: Icon(AppIcons.iconSettings),
  onPressed: () {},
)

命令参考

help - 显示帮助

dart run yx_icon_fonts help

init - 初始化配置

# 创建配置文件
dart run yx_icon_fonts init

# 强制覆盖已存在的配置文件
dart run yx_icon_fonts init --force

generate - 生成代码

# 使用默认配置文件
dart run yx_icon_fonts generate

# 指定配置文件
dart run yx_icon_fonts generate --config my_config.yaml

# 详细输出
dart run yx_icon_fonts generate --verbose

配置选项

完整的配置选项请参考 icon_generator_config.template.yaml。

generator 配置

选项	类型	默认值	说明
name	string	"Icon Generator"	生成器名称，用于代码注释
version	string	"1.0"	版本号
author	string	""	作者信息

input 配置

选项	类型	默认值	说明
font_file	string	"assets/fonts/iconfont.ttf"	字体文件路径
json_file	string	"assets/fonts/iconfont.json"	JSON 配置文件路径
font_family	string	"iconfont"	字体家族名称

output 配置

选项	类型	默认值	说明
file_path	string	"lib/generated/icons.dart"	输出文件路径
class_name	string	"AppIcons"	生成的类名
generate_docs	bool	true	是否生成文档注释
use_const_constructor	bool	true	是否使用 const 构造函数

生成的代码示例

// ignore_for_file: constant_identifier_names

// ============================================
// 此文件由 yx_icon_fonts 自动生成，请勿手动修改
// 生成时间: 2025-01-01 12:00
// 图标数量: 50
// ============================================

import 'package:flutter/widgets.dart';

/// MyApp Icons 图标常量
class AppIcons {
  AppIcons._();

  // 统一的 IconData 构造方法
  static const _icon = _IconDataFactory._();

  /// icon_home (U+E600)
  static final IconData iconHome = _icon(0xe600);

  // ... 更多图标
}

/// 内部 IconData 工厂类
class _IconDataFactory {
  const _IconDataFactory._();

  static const String _fontFamily = 'iconfont';

  IconData call(int codePoint) => IconData(codePoint, fontFamily: _fontFamily);
}

从 v1.x 迁移

v2.0 版本将 yx_icon_fonts 从 Flutter 库转换为了 CLI 工具。主要变化：

1. 安装方式变化：从 dependencies 改为 dev_dependencies
2. 资源文件位置：字体和 JSON 文件现在放在使用项目中，而非库中
3. 配置方式：使用 YAML 配置文件，支持自定义类名和路径

License

MIT License