Flutter图标管理插件icomoon的使用

Icon Utils #

Dart包，简化与Icomoon服务的集成

使用 #

配置 #

```yaml flutter_icons: output_dir: # 必需。包含图标dart文件的文件夹路径。 temp: # 必需。如果您使用的是icomoon的免费版本应为true。 project: #必需。icomoon项目的名称。 host: #必需。如果使用的是icomoon的付费版本，这是稳定的。 class-name: #可选。生成的图标类的名称。默认值：AppIcons ```

运行命令

加载ttf文件并生成dart类：

flutter pub run icomoon:icomoon_download [--host {HOST}]

Screenshot 2021-07-01 at 14 43 54


## 完整示例Demo

### 步骤一：安装依赖

在`pubspec.yaml`文件中添加`flutter_icons`依赖：

```yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_icons: ^2.0.0

然后运行flutter pub get。

步骤二：配置项目

创建一个名为icon_config.yaml的文件，并添加以下内容：

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"
  project: "my_project"
  host: "your_host_id"
  output_dir: "icons"
  temp: true
  class_name: "AppIcons"

步骤三：下载图标

在终端中运行以下命令：

flutter pub run icomoon:icomoon_download --config icon_config.yaml

步骤四：使用图标

在你的Dart文件中导入生成的图标类：

import 'package:flutter/material.dart';
import 'package:icons/icons.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icomoon Icons Demo'),
        ),
        body: Center(
          child: Icon(AppIcons.ic_home),
        ),
      ),
    );
  }
}

完整的pubspec.yaml文件

name: icomoon_example
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_icons: ^2.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses_material_design: true
  assets:
    - assets/icon/

完整的icon_config.yaml文件

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"
  project: "my_project"
  host: "your_host_id"
  output_dir: "icons"
  temp: true
  class_name: "AppIcons"

以上是使用Flutter图标管理插件icomoon的详细步骤。希望对你有所帮助！


更多关于Flutter图标管理插件icomoon的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图标管理插件icomoon的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


使用 Icomoon 管理 Flutter 图标

Icomoon 是一个非常实用的工具，可以帮助你管理和使用自定义图标集。在 Flutter 中，你可以通过 flutter_icon 或 flutter_iconpicker 插件来使用 Icomoon 生成的图标。以下是使用 Icomoon 管理 Flutter 图标的步骤：

1. 创建图标集

  1. 访问 Icomoon 官网: 打开 Icomoon 官网。
  2. 选择图标: 你可以从 Icomoon 提供的图标库中选择图标，或者上传自己的 SVG 图标。
  3. 生成图标集: 选择好图标后，点击 “Generate Font” 按钮生成图标集。
  4. 下载图标集: 生成后，点击 “Download” 下载图标集。下载的文件通常包含字体文件（.ttf 或 .woff）和一个 selection.json 文件。

2. 在 Flutter 项目中使用图标集

  1. 将字体文件添加到 Flutter 项目:

    • 将下载的 .ttf 或 .woff 文件放入 Flutter 项目的 assets/fonts 目录中。

  2. 配置 pubspec.yaml:

    • 在 pubspec.yaml 文件中添加字体配置：
      flutter:
  fonts:
    - family: Icomoon
      fonts:
        - asset: assets/fonts/icomoon.ttf

  3. 使用图标:

    • 在 Flutter 代码中使用 IconData 来显示图标。你需要知道每个图标的 Unicode 码点，这些信息通常在 selection.json 文件中可以找到。
    • 例如：
      class IcomoonIcons {
  static const IconData home = IconData(0xe900, fontFamily: 'Icomoon');
  static const IconData settings = IconData(0xe901, fontFamily: 'Icomoon');
  // 添加更多图标...
}

// 在 Widget 中使用
Icon(IcomoonIcons.home);

3. 使用 flutter_iconpicker 插件

如果你想要更灵活地选择图标，可以使用 flutter_iconpicker 插件。这个插件可以帮助你从 Icomoon 图标集中选择图标。

  1. 添加依赖:

    • 在 pubspec.yaml 中添加依赖：
      dependencies:
  flutter_iconpicker: ^1.0.0

  2. 选择图标:

    • 使用 FlutterIconPicker 组件来选择图标：
      import 'package:flutter_iconpicker/flutter_iconpicker.dart';

Future<void> pickIcon() async {
  IconData? icon = await FlutterIconPicker.showIconPicker(context);
  if (icon != null) {
    // 使用选择的图标
    print('Selected icon: $icon');
  }
}

  3. 显示图标:

    • 在 Icon 组件中使用选择的图标：
      Icon(selectedIcon);
回到顶部