Flutter图标管理插件icomoon_download的使用

Flutter图标管理插件icomoon_download的使用

简介

icomoon_download 是一个用于从 Icomoon.io 下载图标并生成 Dart 文件以在 Flutter 中使用的工具。请注意，此包与 icomoon.io 无关，它只是一个帮助你在 Flutter 中下载和使用 Icomoon 图标的工具。

字体生成

通过开发依赖安装

你可以通过开发依赖来安装 icomoon_download：

$ flutter pub add --dev icomoon_download

然后运行以下命令生成 Dart 文件：

$ flutter pub run icomoon_download:generate <project-name> <host-id> <output-class-file> [options]

全局激活

你也可以全局激活该包：

$ pub global activate icomoon_download

然后运行以下命令生成 Dart 文件：

$ icomoon_download <project-name> <host-id> <output-class-file> [options]

示例： 假设你的 selection.json 文件位于 https://i.icomoon.io/public/temp/12345/MyProject/selection.json，那么：

• project-name 是 MyProject
• host-id 是 12345
• 使用 --no-is-temp 选项（默认）

必需的位置参数：

• <project-name>：项目的名称。
• <host-id>：项目的主机 ID。
• <output-class-file>：输出类文件的路径，应具有 .dart 扩展名。

Flutter 类选项：

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

其他选项：

• --[no-]-is-temp：使用 Icomoon 的免费版本。
• -s 或 --output-selection-file=<path>：selection.json 文件的输出路径。如果不提供，默认保存在当前工作目录。
• -z 或 --config-file=<path>：icomoon_download YAML 配置文件的路径。默认使用 pubspec.yaml 和 icomoon_download.yaml 文件。
• -v 或 --verbose：显示所有日志消息。
• -h 或 --help：显示使用信息。

使用示例：

更新 Flutter 项目的 pubspec.yaml 文件：

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

运行以下命令生成 Dart 文件：

$ icomoon_download MyProject 12345 lib/my_icons.dart --class-file=MyIcons --output-selection-file=selection.json -v

配置文件

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

icomoon_download:
  project_name: MyProject
  host_id: "123456"
  is_temp: true

  output_selection_file: fonts/selection.json
  output_class_file: lib/ui/icons.dart

  class_name: UiIcons
  format: true

  verbose: false

project_name、host_id 和 output_class_file 是必需的。你可以使用 --config-file 选项指定任何其他配置文件。

完整示例 Demo

以下是一个完整的示例项目，展示了如何使用 icomoon_download 插件。

1. 创建 Flutter 项目

首先，创建一个新的 Flutter 项目：

$ flutter create my_flutter_app
$ cd my_flutter_app

2. 添加 icomoon_download 依赖

编辑 pubspec.yaml 文件，添加 icomoon_download 作为开发依赖：

dev_dependencies:
  icomoon_download: ^latest_version

然后运行以下命令安装依赖：

$ flutter pub get

3. 下载并生成图标

假设你已经在 Icomoon.io 上创建了一个项目，并且 selection.json 文件的 URL 是 https://i.icomoon.io/public/temp/12345/MyProject/selection.json。

编辑 pubspec.yaml 文件，添加 Icomoon 字体：

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

运行以下命令生成 Dart 文件：

$ flutter pub run icomoon_download:generate MyProject 12345 lib/my_icons.dart --class-file=MyIcons --output-selection-file=selection.json -v

这将生成一个名为 my_icons.dart 的 Dart 文件，其中包含你选择的图标的定义。

4. 使用生成的图标

在你的 Flutter 项目中使用生成的图标。例如，在 lib/main.dart 文件中：

import 'package:flutter/material.dart';
import 'package:my_flutter_app/my_icons.dart'; // 导入生成的图标文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icomoon Icons Example'),
        ),
        body: Center(
          child: Icon(
            MyIcons.example_icon, // 使用生成的图标
            size: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

5. 运行项目

最后，运行你的 Flutter 项目：

$ flutter run