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

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

介绍

mrx_icon_font_gen 插件可以用于从包含SVG文件的目录生成图标字体。该字体是通过FlutterIcon工具创建的，因此需要互联网连接才能工作。生成的文件可以进一步使用FlutterIcon Web工具进行自定义。

安装

你可以使用以下命令安装此插件：

dart pub global activate mrx_icon_font_gen

使用方法

mrx_icon_font_gen 提供了一个名为 create 的命令，用于生成所有所需的文件。运行以下命令：

dart pub global run mrx_icon_font_gen create

这将生成三个文件，其中一个将是TTF格式的图标字体。生成的字体需要添加到应用程序的 pubspec.yaml 文件中。使用默认值时，配置如下：

flutter:
  fonts:
    - family: AppIcons # 使用与 "--class-name" 选项相同的名称
      fonts:
        - asset: assets/fonts/AppIcons.ttf

注意事项

后续执行 mrx_icon_font_gen create 将会覆盖之前生成的文件。目前，你只能通过FlutterIcon Web界面修改图标字体。

命令行选项

mrx_icon_font_gen 支持以下命令行选项：

  • --help

    • 打印命令的使用信息。

  • --from

    • 包含SVG文件的目录路径。该目录将递归扫描，所有扩展名为 *.svg 的文件都将被添加到结果中。默认情况下，将搜索当前目录。每个文件应至少包含一个 <path> 元素，描述字形。如果有多个 <path> 元素，只有第一个会被处理。

  • --class-name

    • 生成的Dart类名称，该类包含 IconData 对象，可用于 Icon 小部件。它应该是一个有效的Dart类名，并且用作生成的字体文件的名称。默认值为 AppIcons。

  • --out-font

    • 字体文件保存的目录路径。--class-name 选项的值将用作文件名。记得将生成的字体添加到应用程序的 pubspec.yaml 文件中。默认值为 assets/fonts/。

  • --out-flutter

    • 存储包含 IconData 对象的类的目录路径。每个SVG文件将有一个对应字段，字段名源自文件路径。

  • --out-config

    • 存储FlutterIcon兼容配置文件的位置。该文件可以用于进一步自定义字体。默认值为 lib/config/font/。

输出文件

假设项目结构如下：

project_root_directory
└───assets
    └───images
        └───logo.svg
        └───bottom_bar
            └───home.svg

使用默认选项运行命令后，将生成以下文件：

  • project_root_directory/assets/fonts/AppIcons.ttf

    • 由FlutterIcon生成的TTF字体文件。

  • project_root_directory/assets/fonts/config/config.json

    • 包含标准化字形信息的配置文件，可以上传到FlutterIcon进行进一步自定义。

  • project_root_directory/lib/config/font/app_icons.dart

    • 一个包含所有字形定义的Dart类。每个SVG文件都有一个对应的字段，字段名源自文件相对于 --from 选项路径的相对路径。对名称进行了轻微修改，以去除非法字符，并将空格和目录分隔符替换为下划线。如果名称以数字或下划线开头，则会加上前缀 i。如果名称仅由非法字符组成，则替换为 icon。对于重复的名称或与保留关键字相同的名字，会附加一个递增的数字。

生成的类示例如下：

import 'package:flutter/widgets.dart';

class AppIcons {
  AppIcons._();

  static const _kFontFam = 'AppIcons';
  static const String? _kFontPkg = null;

  // 注意 "home" 图标名称受其位于 "bottom_bar" 目录的影响
  static const IconData bottom_bar_home = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData logo = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg); 
}

示例代码

以下是一个完整的示例代码，展示了如何使用 mrx_icon_font_gen 生成的图标字体来渲染一个国际象棋棋盘：

import 'package:flutter/material.dart';
import 'package:mrx_icon_font_gen_example/config/font/chess_icons.dart';

/// 这个示例项目使用从 `assets/images` 目录中的SVG文件生成的图标字体。
/// 它使用来自FontAwesome项目的国际象棋棋子图标渲染一个棋盘。
///
/// 生成所有必要文件的命令如下：
///
/// `mrx_icon_font_gen --from assets/images --class-name=ChessIcons`
///
/// 生成了三个文件：
/// * `lib/config/font/chess_icons.dart` - 包含 `IconData` 对象的Dart文件，用于 `Icon` 小部件
/// * `assets/fonts/config/config.json` - 可以与 https://fluttericon.com 工具进一步使用的配置文件
/// * `assets/fonts/ChessIcons.ttf` - 包含输入目录中所有字形的字体文件，在本例中为 `assets/images`。

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'mrx_icon_font_gen Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  static const lightTileColor = Colors.orange;
  static const darkTileColor = Colors.brown;
  static const blackPieceColor = Colors.black;
  static const whitePieceColor = Colors.white;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('mrx_icon_font_gen Demo'),
        leading: Icon(ChessIcons.chess_solid),
      ),
      body: Center(
        child: Table(
          children: [
            _buildBackPiecesRow(isEven: true, color: blackPieceColor),
            _buildPawnsRow(isEven: false, color: blackPieceColor),
            ...List<TableRow>.generate(
                4, (i) => _buildEmptyRow(isEven: i.isEven)),
            _buildPawnsRow(isEven: true, color: whitePieceColor),
            _buildBackPiecesRow(isEven: false, color: whitePieceColor),
          ],
        ),
      ),
    );
  }

  TableRow _buildBackPiecesRow({
    required bool isEven,
    required Color color,
  }) {
    return TableRow(
      children: [
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? lightTileColor : darkTileColor,
              child: Center(
                child: Icon(
                  ChessIcons.pieces_chess_rook_solid,
                  color: color,
                ),
              ),
            ),
          ),
        ),
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? darkTileColor : lightTileColor,
              child: Icon(
                ChessIcons.pieces_chess_knight_solid,
                color: color,
              ),
            ),
          ),
        ),
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? lightTileColor : darkTileColor,
              child: Icon(
                ChessIcons.pieces_chess_bishop_solid,
                color: color,
              ),
            ),
          ),
        ),
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? darkTileColor : lightTileColor,
              child: Icon(
                ChessIcons.pieces_chess_queen_solid,
                color: color,
              ),
            ),
          ),
        ),
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? lightTileColor : darkTileColor,
              child: Icon(
                ChessIcons.pieces_chess_king_solid,
                color: color,
              ),
            ),
          ),
        ),
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? darkTileColor : lightTileColor,
              child: Icon(
                ChessIcons.pieces_chess_bishop_solid,
                color: color,
              ),
            ),
          ),
        ),
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? lightTileColor : darkTileColor,
              child: Icon(
                ChessIcons.pieces_chess_knight_solid,
                color: color,
              ),
            ),
          ),
        ),
        TableCell(
          child: AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              color: isEven ? darkTileColor : lightTileColor,
              child: Icon(
                ChessIcons.pieces_chess_rook_solid,
                color: color,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _buildPawnsRow({
    required bool isEven,
    required Color color,
  }) {
    return TableRow(
      children: List<TableCell>.generate(
          8,
          (i) => TableCell(
                child: AspectRatio(
                  aspectRatio: 1.0,
                  child: Container(
                    color: (isEven == i.isEven) ? lightTileColor : darkTileColor,
                    child: Icon(
                      ChessIcons.pieces_chess_pawn_solid,
                      color: color,
                    ),
                  ),
                ),
              )),
    );
  }

  TableRow _buildEmptyRow({
    required bool isEven,
  }) {
    return TableRow(
      children: List<TableCell>.generate(
          8,
          (i) => TableCell(
                child: AspectRatio(
                  aspectRatio: 1.0,
                  child: Container(
                    color: (isEven == i.isEven) ? lightTileColor : darkTileColor,
                  ),
                ),
              )),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用mrx_icon_font_gen插件来生成图标字体的一个示例代码案例。这个插件可以帮助你从SVG图标生成Flutter中的图标字体。

步骤 1: 添加依赖

首先，你需要在你的pubspec.yaml文件中添加mrx_icon_font_gen依赖：

dependencies:
  flutter:
    sdk: flutter
  mrx_icon_font_gen: ^最新版本号 # 请替换为最新的版本号

dev_dependencies:
  build_runner: ^最新版本号 # 请替换为最新的版本号

步骤 2: 准备SVG图标

将你的SVG图标文件放在一个特定的目录下，例如assets/icons。

步骤 3: 配置pubspec.yaml

在pubspec.yaml中配置SVG图标的资源路径：

flutter:
  assets:
    - assets/icons/ # 这里是你的SVG图标存放的目录

步骤 4: 创建配置文件

在项目根目录下创建一个名为iconfont.yaml的配置文件，内容如下：

classes:
  IconFont:
    font_family: MyIconFont
    package: lib

icons:
  home: assets/icons/home.svg
  settings: assets/icons/settings.svg
  # 添加更多图标配置

步骤 5: 生成图标字体

打开终端，导航到你的Flutter项目根目录，运行以下命令来生成图标字体：

flutter pub run build_runner build --delete-conflicting-outputs

这个命令会根据iconfont.yaml配置生成字体文件以及Dart代码。

步骤 6: 使用生成的图标字体

生成的图标字体和Dart代码会放在lib目录下，通常会有一个icon_font.dart文件。你可以在你的Flutter代码中导入并使用这些图标：

import 'package:your_project_name/icon_font.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon Font Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(IconFont.home),
              Icon(IconFont.settings),
              // 使用更多生成的图标
            ],
          ),
        ),
      ),
    );
  }
}

在上面的代码中，IconFont.home和IconFont.settings是从icon_font.dart文件中生成的图标。

注意事项

  • 确保SVG图标的路径和名称在iconfont.yaml中配置正确。
  • 生成的字体文件和Dart代码文件不需要手动修改，它们是由build_runner根据配置自动生成的。
  • 如果图标没有正确显示，请检查字体文件是否被正确加载到项目中，以及pubspec.yaml中的资源路径配置是否正确。

这样，你就可以在Flutter项目中使用mrx_icon_font_gen插件来生成和使用图标字体了。

回到顶部