Flutter图标生成插件icomoon_generator的使用

Flutter图标生成插件icomoon_generator的使用

简介

icomoon_generator 是一个用于生成Flutter兼容的类的Dart包。该类包含每个IcoMoon选择图标的静态常量 IconData 字段。此包完全用Dart编写，不需要任何外部依赖。

字体生成

通过开发依赖安装

$ flutter pub add --dev icomoon_generator

# 安装完成后，可以运行以下命令：
$ flutter pub run icomoon_generator:generate <input-json-file> <output-class-file> [options]

或者全局激活包

$ pub global activate icomoon_generator

# 安装完成后，可以运行以下命令：
$ icomoon_generator <input-json-file> <output-class-file> [options]

必要的位置参数

• <input-json-file>：输入JSON文件的路径，应具有 .json 扩展名。
• <output-class-file>：输出类文件的路径，应具有 .dart 扩展名。

Flutter类选项

• -c 或 --class-name=<name>：生成类的名称。
• -p 或 --package=<name>：提供字体的包的名称。用于通过包依赖提供字体。
• --[no-]format：格式化生成的Dart代码。

其他选项

• -z 或 --config-file=<path>：IcoMoon生成器YAML配置文件的路径，默认使用 pubspec.yaml 和 icomoon_generator.yaml 文件。
• -v 或 --verbose：显示所有日志消息。
• -h 或 --help：显示使用信息。

使用示例

$ icomoon_generator fonts/selection.json lib/my_icons.dart --class-name=MyIcons -v

更新Flutter项目的 pubspec.yaml：

flutter:
  fonts:
    - family: Icomoon
      fonts:
        - asset: fonts/icomoon.ttf

配置文件

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

icomoon_generator:
  input_json_file: "fonts/selection.json"
  output_class_file: "lib/my_icons.dart"
  
  class_name: "MyIcons"
  package: my_font_package
  format: true

  verbose: false

input_json_file 和 output_class_file 键是必需的。可以通过使用 --config-file 选项指定其他配置文件。

input_json_file 结构示例

{
  "icons": [
    {
      "properties": {
        "name": "home",
        "code": 01
      }
    },
    {
      "properties": {
        "name": "home2",
        "code": 02
      }
    },
    {
      "properties": {
        "name": "home3",
        "code": 03
      }
    },
    {
      "properties": {
        "name": "office",
        "code": 04
      }
    }
  ]
}

示例项目

以下是一个完整的示例项目，展示了如何使用 icomoon_generator 生成图标并将其集成到Flutter应用中。

1. 创建一个新的Flutter项目

$ flutter create icon_example
$ cd icon_example

2. 添加 icomoon_generator 作为开发依赖

在 pubspec.yaml 中添加以下内容：

dev_dependencies:
  icomoon_generator: ^latest_version

然后运行：

$ flutter pub get

3. 准备IcoMoon JSON文件

将从IcoMoon导出的 selection.json 文件放入 fonts 文件夹中：

icon_example/
├── fonts/
│   └── selection.json

4. 生成图标类

运行以下命令生成图标类：

$ flutter pub run icomoon_generator:generate fonts/selection.json lib/my_icons.dart --class-name=MyIcons -v

5. 更新 pubspec.yaml 以包含字体

在 pubspec.yaml 中添加以下内容：

flutter:
  fonts:
    - family: Icomoon
      fonts:
        - asset: fonts/icomoon.ttf

6. 在Flutter应用中使用生成的图标

编辑 lib/main.dart 文件，使用生成的图标类：

import 'package:flutter/material.dart';
import 'package:icon_example/my_icons.dart'; // 导入生成的图标类

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IcoMoon Generator Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('IcoMoon Generator Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(MyIcons.home, size: 100), // 使用生成的图标
              Icon(MyIcons.home2, size: 100),
              Icon(MyIcons.home3, size: 100),
              Icon(MyIcons.office, size: 100),
            ],
          ),
        ),
      ),
    );
  }
}

7. 运行应用

$ flutter run