Flutter图标库插件king011_icons的使用

英文 | 简体中文

king011_icons

自定义图标库，灵感来源于 react-native-vector-icons。

注意事项

1. v1.0.0 版本有重大 API 变化，请谨慎升级。
2. 以数字开头的图标名称前会添加 $ 前缀。
3. 包含 Dart 关键字的图标名称会在末尾添加 _ 后缀。

支持的图标集

浏览所有图标集请访问 这里。

• Ant Design 由 AntFinance 提供（297 个图标）
• Entypo 由 Daniel Bruce 提供（411 个图标）
• EvilIcons 由 Alexander Madyankin 和 Roman Shamin 提供（v1.10.1，70 个图标）
• Feather 由 Cole Bemis 和 Contributors 提供（v4.7.0，266 个图标）
• Font Awesome 由 Dave Gandy 提供（v4.7.0，675 个图标）
• Font Awesome 5 由 Fonticons, Inc. 提供（v5.7.0，1500 个免费图标）
• Foundation 由 ZURB, Inc. 提供（v3.0，283 个图标）
• Ionicons 由 Ben Sperry 提供（v4.2.4，696 个图标）
• MaterialIcons 由 Google, Inc. 提供（v3.0.1，932 个图标）
• MaterialCommunityIcons 由 MaterialDesignIcons.com 提供（v4.0.96，4416 个图标）
• Octicons 由 Github, Inc. 提供（v8.0.0，177 个图标）
• Zocial 由 Sam Collins 提供（v1.0，100 个图标）
• SimpleLineIcons 由 Sabbir 和 Contributors 提供（v2.4.1，189 个图标）
• Weather Icons 由 erikflowers 提供（v2.0.10，596 个图标）

使用方法

要使用此插件，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  king011_icons: ^最新版本号

小部件

IconToggle

示例代码

以下是一个完整的示例代码，展示如何使用 king011_icons 插件：

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required 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: [
            // 使用 Ant Design 图标
            Icon(AntDesign.stepforward),

            // 使用 Ionicons 图标
            Icon(Ionicons.ios_search),

            // 使用 FontAwesome 图标
            Icon(FontAwesome.glass),

            // 使用 Material Icons 图标
            Icon(MaterialIcons.ac_unit),

            // 使用 FontAwesome 5 图标
            Icon(FontAwesome5.address_book),
            Icon(FontAwesome5Solid.address_book),
            Icon(FontAwesome5Brands.$500px),

            // 使用 FlutterIcons 访问所有图标
            Icon(FlutterIcons.stepforward_ant),
            Icon(FlutterIcons.html5_faw),
          ],
        ),
      ),
    );
  }
}

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

第一步

运行以下命令激活工具：

pub global activate split_icon

第二步

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

king011_icons:
  includes:
    - ant       # Ant Design
    - mco       # Material Community Icons
    - ion       # Ionicons
    - faw       # Font Awesome
    - faw5      # Font Awesome 5 Regular
    - faw5s     # Font Awesome 5 Solid
    - faw5b     # Font Awesome 5 Brands
    - oct       # Octicons
    - sli       # Simple Line Icons
    - wea       # Weather Icons

第三步

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

split_icon