Flutter图标管理插件miladtech_flutter_icons的使用

说明

<miladtech_flutter_icons> 是一个用于管理Flutter项目中图标的插件。通过该插件，您可以轻松地在项目中使用多种图标集。

注意事项

以下是一些需要注意的地方：

1. 图标名称以数字开头的会添加 <code>$</code> 前缀。
2. 使用Dart关键字命名的图标会在末尾添加 <code>_</code> 后缀。

支持的图标集

以下是该插件支持的所有图标集：

• Ant Design（由AntFinance提供，共297个图标）
• Entypo（由Daniel Bruce提供，共411个图标）
• EvilIcons（由Alexander Madyankin & Roman Shamin提供，共70个图标）
• Feather（由Cole Bemis & 贡献者提供，共266个图标）
• Font Awesome（由Dave Gandy提供，共675个图标）
• Font Awesome 5（由Fonticons, Inc.提供，共1500个免费图标）
• Foundation（由ZURB, Inc.提供，共283个图标）
• Ionicons（由Ben Sperry提供，共696个图标）
• MaterialIcons（由Google, Inc.提供，共932个图标）
• MaterialCommunityIcons（由MaterialDesignIcons.com提供，共4416个图标）
• Octicons（由Github, Inc.提供，共177个图标）
• Zocial（由Sam Collins提供，共100个图标）
• SimpleLineIcons（由Sabbir & 贡献者提供，共189个图标）
• Weather Icons（由erikflowers提供，共596个图标）

使用方法

要使用此插件，请将其添加到您的 pubspec.yaml 文件中作为依赖项。

dependencies:
  miladtech_flutter_icons: ^最新版本号

然后运行 flutter pub get 来安装插件。

小部件

IconToggle

IconToggle 是一个可以切换图标的按钮小部件，具有丰富的配置选项。

示例代码

以下是一个完整的示例代码，展示如何在项目中使用 miladtech_flutter_icons 插件。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Icons'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 使用原生图标
            Icon(AntDesign.stepforward),
            Icon(Ionicons.ios_search),
            Icon(FontAwesome.glass),
            Icon(MaterialIcons.ac_unit),
            Icon(FontAwesome5.address_book),
            Icon(FontAwesome5Solid.address_book),
            Icon(FontAwesome5Brands.$500px),

            // 使用FlutterIcons类访问所有图标
            Icon(FlutterIcons.stepforward_ant), // Ant Design
            Icon(FlutterIcons.html5_faw),       // Font Awesome
            Icon(FlutterIcons.home_mco),        // Material Community Icons
            Icon(FlutterIcons.cloud_mdi),       // Material Icons
            Icon(FlutterIcons.rain_oct),        // Octicons
            Icon(FlutterIcons.sun_sli),         // Simple Line Icons
            Icon(FlutterIcons.weather_wea),     // Weather Icons
          ],
        ),
      ),
    );
  }
}

如何保留项目中使用的字体

如果您希望只保留项目中实际使用的字体，可以按照以下步骤操作：

第一步：激活工具

执行以下命令激活工具：

pub global activate split_icon

第二步：在 pubspec.yaml 中指定字体

在项目的 pubspec.yaml 文件中添加您想保留的字体：

miladtech_flutter_icons:
  includes:
    - ant
    - mco
    - faw
    - mdi
    - oct
    - sli
    - wea

第三步：运行分割工具

在项目目录下执行以下命令：

split_icon