Flutter图标库插件heroicons的使用

HeroIcons简介

HeroIcons 是一个由 Tailwind Labs 提供的图标集合，现在已经被移植到了 Flutter 中。这个包以SVG图片的形式渲染这些图标。

该包最后更新至使用 HeroIcons 2.2.0版本（更新日期：2024年12月15日）。如果有更新版本的HeroIcons可用，请创建问题或拉取请求。

使用方法

基本用法

你可以通过HeroIcon小部件来使用这些图标。下面是一个简单的例子：

class MyExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HeroIcon(
      HeroIcons.calendar,
      style: HeroIconStyle.outline, // 默认使用轮廓图标
      color: Colors.red,
      size: 30,
    );
  }
}

设置默认样式

你还可以使用 HeroIconTheme 来为应用中的所有图标设置默认样式（例如，轮廓或实心）。对于单个图标，你仍然可以覆盖默认样式。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HeroIconTheme(
        style: HeroIconStyle.solid,
        child: MyHomePage(),
      ),
    );
  }
}

安装

要快速添加最新版本的 heroicons 到你的项目中，可以通过命令行运行以下命令：

flutter pub add heroicons

开发指南

获取新图标并自动生成源代码

如果你想要获取新的图标，并自动为 heroicons.dart 文件生成源代码（执行以下两个步骤），可以运行以下命令：

dart tool/update.dart

额外命令

如果需要分别执行上述步骤，可以这样做：

• 获取新图标：将新图标组织到 assets/ 目录下，并更新README文件。

  dart tool/fetch_icons.dart
  

  可选地，你可以指定一个分支来获取图标。例如，从 dev 分支获取图标：

  dart tool/fetch_icons.dart dev
  

  注意，旧分支（如 v1）可能无法正常工作，因为SVG的组织方式不同，并不是所有的样式都可用。

• 生成源代码：为每个图标创建一个枚举条目，并生成 heroicons.dart 文件。

  dart tool/generator.dart
  

示例代码

这里提供了一个完整的示例代码，展示了如何在Flutter应用中使用heroicons：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        iconTheme: const IconThemeData(
          color: Colors.red,
        ),
      ),
      home: const HeroIconTheme(
        // .outline 是默认样式，但这是改变应用中所有 HeroIcons 默认样式的做法。
        style: HeroIconStyle.outline,
        child: HomeScreen(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HeroIcons'),
      ),
      body: const Center(
        child: IconTheme(
          data: IconThemeData(color: Colors.black),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              HeroIcon(HeroIcons.arrowLeft),
              HeroIcon(HeroIcons.arrowRight),
              HeroIcon(HeroIcons.calendar),
              HeroIcon(HeroIcons.arrowLeft, style: HeroIconStyle.solid),
              HeroIcon(HeroIcons.arrowRight, style: HeroIconStyle.solid),
              HeroIcon(HeroIcons.calendar, style: HeroIconStyle.solid),
              IconTheme(
                data: IconThemeData(
                  size: 40,
                  color: Colors.blue,
                ),
                child: HeroIcon(
                  HeroIcons.calendar,
                  style: HeroIconStyle.outline,
                ),
              ),
              IconTheme(
                data: IconThemeData(
                  size: 40,
                  color: Colors.red,
                ),
                child: HeroIcon(HeroIcons.calendar, style: HeroIconStyle.solid),
              ),
              IconTheme(
                data: IconThemeData(
                  size: 40,
                  color: Colors.blue,
                ),
                child: HeroIcon(HeroIcons.calendar, style: HeroIconStyle.mini),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码展示了如何在Flutter应用中使用不同的HeroIcons样式和大小，并且演示了如何通过HeroIconTheme来全局配置图标的样式。