Flutter图标库插件jaspr_lucide_icons的使用

Flutter图标库插件jaspr_lucide_icons的使用

安装

首先，确保你已经安装了Dart SDK。然后通过以下命令安装jaspr_lucide_icons插件：

dart pub add jaspr_lucide_icons

你也可以使用流行的包管理工具进行安装：

• pnpm:

  pnpm install lucide
  

• yarn:

  yarn add lucide
  

• npm:

  npm install lucide
  

使用

在你的Jaspr项目中使用Lucide图标时，首先需要导入jaspr_lucide_icons并将其作为根应用文件的最后一部分包含进来。

以下是一个完整的示例代码：

import 'package:jaspr/jaspr.dart';
import 'package:jaspr_lucide_icons/jaspr_lucide_icons.dart';
import 'package:jaspr_router/jaspr_router.dart';
import 'components/header.dart';
import 'pages/about.dart';
import 'pages/home.dart';

class App extends StatelessComponent {
  const App({super.key});

  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield div(classes: 'main', [
      const Header(),
      Router(routes: [
        Route(path: '/', title: 'Home', builder: (context, state) => const Home()),
        Route(path: '/about', title: 'About', builder: (context, state) => const About()),
      ]),
    ]);
    yield importLucideIcons(mode: Mode.development); // 在开发模式下加载图标
  }

  @css
  static final styles = [
    css('.main', [
      css('&').box(height: 100.vh).flexbox(direction: FlexDirection.column, wrap: FlexWrap.wrap),
      css('section').flexItem(flex: Flex(grow: 1)).flexbox(
        direction: FlexDirection.column,
        justifyContent: JustifyContent.center,
        alignItems: AlignItems.center,
      ),
    ]),
  ];
}

示例：在组件中使用Lucide图标

以下是如何在一个Jaspr组件中使用Lucide图标的示例：

import 'package:jaspr/jaspr.dart';
import 'package:jaspr_lucide_icons/jaspr_lucide_icons.dart';

@client
class About extends StatelessComponent {
  const About({super.key});

  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield section([
      ol([
        li([
          h3([lucideIcon('book-open', color: Colors.blue), text(' Documentation')]),
          text('Jaspr的官方文档提供了所有你需要的信息来开始使用。'),
        ]),
        li([
          h3([lucideIcon('message-circle-more', color: Colors.black), text(' 社区')]),
          text('遇到问题了吗？请在官方Discord服务器上提问。'),
        ]),
        li([
          h3([lucideIcon('package', color: Colors.black), text(' 生态系统')]),
          text('获取官方的Jaspr包和集成，例如jaspr_router、jaspr_tailwind或jaspr_riverpod。'),
          text('在pub.dev上查找与Jaspr相关的包，使用#jaspr主题标签。'),
        ]),
        li([
          h3([lucideIcon('heart', color: Colors.black), text(' 支持Jaspr')]),
          text('如果你喜欢Jaspr，请在GitHub上给我们点赞，并告诉你的朋友。'),
        ]),
      ]),
    ]);
  }

  @css
  static final styles = [
    css('ol').box(maxWidth: 500.px),
  ];
}

Lucide图标定义

以下是lucideIcon函数的定义：

Component lucideIcon(
  String icon, {
  Key? key,
  Unit? width,
  Unit? height,
  Unit? size,
  Color? color,
  String? className,
  String? style,
  Unit? strokeWidth,
  String? id,
  Map<String, String>? attributes,
});

持续集成

jaspr_lucide_icons 插件内置了一个由 GitHub Actions 提供支持的工作流，确保每次提交或推送时代码都会自动格式化、lint 和测试。该项目使用 Very Good Analysis 进行严格分析，并通过 Very Good Workflows 强制执行代码覆盖率。

运行测试

要运行所有单元测试并生成覆盖率报告，请执行以下步骤：

dart pub global activate coverage 1.2.0
dart test --coverage=coverage
dart pub global run coverage:format_coverage --lcov --in=coverage --out=coverage/lcov.info
genhtml coverage/lcov.info -o coverage/
open coverage/index.html

示例项目结构

当你将 jaspr_lucide_icons 集成到项目中时，保持清晰的项目结构非常重要。以下是一个示例项目结构：

/your_project
|-- lib/
|   |-- components/
|   |   |-- header.dart
|   |-- pages/
|   |   |-- home.dart
|   |   |-- about.dart
|   |-- app.dart
|   |-- main.dart
|-- pubspec.yaml
|-- README.md