Flutter图标库插件super_icons的使用

Flutter图标库插件super_icons的使用

Super Icons 是一个图标包，提供精选的高质量图标集以加速UI开发。

图标包列表

以下是该包中包含的图标包列表：

1. Bootstrap
2. BoxIcons
3. Clarity
4. EvaIcons
5. HeroIcons
6. Iconsax
7. IonIcons
8. Lucide
9. MingCute
10. PelaIcons

使用示例

Bootstrap

// 使用Bootstrap图标
Icon(SuperIcons.bs_google), // Google图标
Icon(SuperIcons.bs_bootstrap), // Bootstrap图标
Icon(SuperIcons.bs_github), // GitHub图标

BoxIcons

// 使用BoxIcons图标
Icon(SuperIcons.bx_apple), // Apple图标
Icon(SuperIcons.bx_git_branch), // Git分支图标
Icon(SuperIcons.bx_cookie), // Cookie图标

Clarity

// 使用Clarity图标
Icon(SuperIcons.cl_map_outline_badged), // 地图图标
Icon(SuperIcons.cl_application_solid), // 应用程序图标
Icon(SuperIcons.cl_camera_line), // 相机图标

EvaIcons

// 使用EvaIcons图标
Icon(SuperIcons.ev_clipboard), // 剪贴板图标
Icon(SuperIcons.ev_flash), // 闪光图标
Icon(SuperIcons.ev_clipboard_outline), // 剪贴板轮廓图标

HeroIcons

// 使用HeroIcons图标
Icon(SuperIcons.hr_printer), // 打印机图标
Icon(SuperIcons.hr_pencil_square), // 铅笔方块图标
Icon(SuperIcons.hr_play_circle), // 播放圆圈图标

Iconsax

// 使用Iconsax图标
Icon(SuperIcons.is_cake_bold), // 蛋糕图标
Icon(SuperIcons.is_clock_bulk), // 时钟图标
Icon(SuperIcons.is_dollar_circle_outline), // 美元圆圈轮廓图标

IonIcons

// 使用IonIcons图标
Icon(SuperIcons.ii_bug), // Bug图标
Icon(SuperIcons.ii_finger_print), // 指纹图标
Icon(SuperIcons.ii_logo_react), // React Logo图标

MingCute

// 使用MingCute图标
Icon(SuperIcons.mg_knife_line), // 刀具线条图标
Icon(SuperIcons.mg_badminton_line), // 羽毛球线条图标
Icon(SuperIcons.mg_currency_bitcoin_fill), // 比特币填充图标

完整示例Demo

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeView(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeView'),
      ),
      body: const Column(
        children: [
          // 显示Bootstrap图标
          SizedBox(
            height: 60,
            width: 60,
            child: ColoredBox(
              color: Colors.black, // 背景颜色为黑色
              child: Icon(SuperIcons.bs_airplane, size: 30), // Bootstrap飞机图标
            ),
          ),
          // 显示Clarity图标
          SizedBox(
            height: 60,
            width: 60,
            child: ColoredBox(
              color: Colors.black, // 背景颜色为黑色
              child: Icon(SuperIcons.cl_airplane_line, size: 30), // Clarity飞机线条图标
            ),
          ),
          // 显示MingCute图标
          SizedBox(
            height: 60,
            width: 60,
            child: ColoredBox(
              color: Colors.black, // 背景颜色为黑色
              child: Icon(SuperIcons.mg_airplane_line, size: 30), // MingCute飞机线条图标
            ),
          ),
        ],
      ),
    );
  }
}