Flutter图标字体转换插件iconfont_convert_flutter的使用

插件简介

iconfont_convert 是一个帮助开发者从 阿里巴巴矢量图标库 生成 IconData 的 Flutter 插件。它支持多个 iconfont 项目，并且可以自动在 pubspec.yaml 文件中注册字体。

安装

方法一：在项目中安装（推荐）

在项目的 pubspec.yaml 文件中添加以下依赖：

dev_dependencies:
  iconfont: ^1.0.0

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

flutter packages pub run iconfont_convert

方法二：全局安装

通过以下命令全局安装插件：

flutter pub global activate iconfont_convert

全局安装后，可以直接使用命令行工具运行插件：

iconfont-convert

参数说明

插件支持以下参数：

-c  --config     config file path
                 (defaults to "pubspec.yaml")
-h, --help       help

使用方法

配置文件示例

在 pubspec.yaml 文件中添加以下配置：

# pubspec.yaml
iconfont:
  - icons:
    - url: //at.alicdn.com/t/c/font_3892650_94qckhszrmg.css
      icon_name: test_icons
      icon_class: TestIcons
    font_assets_path: assets/iconfont/
    icon_class_path: lib/icons/

上述配置表示：

• 从指定的 CSS 文件中提取图标。
• 图标名称为 test_icons。
• 生成的 IconData 类名为 TestIcons。
• 字体文件路径为 assets/iconfont/。
• 生成的 Dart 文件路径为 lib/icons/。

运行以下命令生成图标：

flutter packages pub run iconfont_convert

独立配置文件示例

也可以创建一个独立的 iconfont.yaml 文件来管理配置：

# iconfont.yaml
- icons:
  - url: //at.alicdn.com/t/c/font_3892650_94qckhszrmg.css
    icon_name: test_icons
    icon_class: TestIcons
  font_assets_path: assets/iconfont/
  icon_class_path: lib/icons/

运行以下命令生成图标：

iconfont-convert --config iconfont.yaml

示例代码

以下是一个完整的示例代码，展示如何使用生成的图标：

示例代码文件：example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:iconfont_convert_example/icons/test_icons.dart'; // 导入生成的图标类

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Iconfont Convert Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TestIconsPreview(), // 使用生成的图标预览页面
    );
  }
}

class TestIconsPreview extends StatelessWidget {
  const TestIconsPreview({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Iconfont Convert Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(TestIcons.test_icon, size: 100), // 使用生成的图标
            const SizedBox(height: 20),
            Text(
              '测试图标',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
    );
  }
}

常见问题

1. iconfont command not found
   如果遇到此错误，请确保已正确安装插件并将其添加到全局路径中。可以通过以下命令重新安装插件：

   flutter pub global activate iconfont_convert