Fefufit Icons

FefufitIcons 是一套完全开源的图标集，适用于 Web、iOS、Android 和桌面应用。

使用

import 'package:fefufit_icons/fefufit_icons.dart';

...

Icon(FFIcons.location),
Icon(FFIcons.person),
Icon(FefuIFFIconscons.home),

示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 Fefufit Icons。

example/lib/main.dart

import 'package:fefufit_icons/fefufit_icons.dart'; // 导入 Fefufit Icons 包
import 'package:flutter/material.dart'; // 导入 Flutter Material 包
import 'package:flutter_svg/flutter_svg.dart'; // 导入 Flutter SVG 包
import 'package:url_launcher/url_launcher.dart'; // 导入 URL 启动包

void main() {
  runApp(const App()); // 运行应用
}

class App extends StatefulWidget {
  const App({super.key}); // 构造函数

  @override
  State<App> createState() => _AppState(); // 创建状态
}

class _AppState extends State<App> {
  ThemeMode themeMode = ThemeMode.light; // 设置初始主题模式为亮色

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fefufit Icons', // 应用标题
      theme: ThemeData.light(), // 亮色主题
      darkTheme: ThemeData.dark(), // 暗色主题
      themeMode: themeMode, // 当前主题模式
      debugShowCheckedModeBanner: false, // 隐藏调试横幅
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Fefufit Icons'), // 应用栏标题
          actions: [
            const GithubLink(), // GitHub 链接按钮
            ThemeSwitcher( // 主题切换按钮
              selectedThemeMode: themeMode,
              changeTheme: () {
                setState(() {
                  themeMode = themeMode == ThemeMode.light
                      ? ThemeMode.dark // 切换到暗色主题
                      : ThemeMode.light; // 切换到亮色主题
                });
              },
            )
          ],
        ),
        body: const Center(child: IconsList()), // 中心显示图标列表
      ),
    );
  }
}

class GithubLink extends StatelessWidget {
  const GithubLink({super.key}); // 构造函数

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: _launchURL, // 按钮点击事件
      icon: SvgPicture.asset(
        'assets/github-mark.svg', // SVG 图标路径
        width: 24, // 宽度
        height: 24, // 高度
        colorFilter: ColorFilter.mode(
            Theme.of(context).iconTheme.color ?? Colors.white, BlendMode.srcIn), // 颜色过滤器
      ),
    );
  }

  Future<void> _launchURL() async { // 打开 URL 的异步方法
    const url = 'https://github.com/fefufit/icons';
    await launchUrl(Uri.parse(url)); // 启动 URL
  }
}

class ThemeSwitcher extends StatelessWidget {
  const ThemeSwitcher(
      {super.key, required this.selectedThemeMode, required this.changeTheme}); // 构造函数

  final ThemeMode selectedThemeMode; // 当前主题模式
  final void Function() changeTheme; // 切换主题的方法

  @override
  Widget build(BuildContext context) {
    IconData icon = selectedThemeMode == ThemeMode.light
        ? Icons.light_mode // 亮色主题图标
        : Icons.dark_mode; // 暗色主题图标

    return IconButton(onPressed: changeTheme, icon: Icon(icon)); // 切换主题按钮
  }
}

class IconsList extends StatelessWidget {
  const IconsList({super.key}); // 构造函数

  @override
  Widget build(BuildContext context) {
    return const Wrap(
      spacing: 8, // 图标间距
      children: [
        Icon(FFIcons.location), // 位置图标
        Icon(FFIcons.person), // 个人图标
        Icon(FFIcons.home), // 家图标
        Icon(FFIcons.timetable), // 时间表图标
        Icon(FFIcons.edit), // 编辑图标
        Icon(FFIcons.search), // 搜索图标
        Icon(FFIcons.filters), // 筛选图标
        Icon(FFIcons.notification), // 通知图标
        Icon(FFIcons.arrowForward), // 向前图标
        Icon(FFIcons.info), // 信息图标
        Icon(FFIcons.logo), // Logo 图标
        Icon(FFIcons.services), // 服务图标
      ],
    );
  }
}