Flutter图标库插件yelo_icons的使用

Flutter图标库插件yelo_icons的使用

Yelo Icons

一个用于将自定义SVG图标轻松集成到Flutter应用中的Flutter插件。

支持

YELO ICONS 是一个为 Flutter/dart 创建的插件。如果你觉得它有用，请考虑支持它。

特性

• 简单的API来使用自定义SVG图标
• 可自定义图标的大小和颜色
• 基于 flutter_svg 包构建，以实现高效的SVG渲染
• v1.0.3 新增功能: 添加了交互处理程序，如 onTap, onPress, onLongPress 等。

开始使用

在你的 pubspec.yaml 文件中添加 yelo_icons：

dependencies:
  yelo_icons: ^1.0.3

运行 flutter pub get 来安装该插件。

使用方法

在Dart代码中导入该包：

import 'package:yelo_icons/yelo_icons.dart';

基本用法

使用 Yelo.icon() 方法来显示一个图标：

Yelo.icon("bold/user", size: 24, color: Colors.blue)

带有交互

你可以添加如 onTap, onLongPress 等交互事件：

Yelo.icon(
  "bold/user",
  size: 48,
  color: Colors.red,
  onTap: () {
    print("User icon tapped!");
  },
  onLongPress: () {
    print("User icon long-pressed!");
  },
)

示例

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

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Yelo.icon("bold/user", size: 48, color: Colors.red, onTap: () {
          print('Icon tapped!');
        }),
        Yelo.icon("outline/settings", size: 24, color: Colors.green),
      ],
    );
  }
}

额外信息

更多关于使用此插件的信息，请参阅 API文档。

要报告问题或贡献于该插件，请访问我们的 GitHub仓库。

贡献

如果您有任何建议或发现插件的问题，请随时在 GitHub仓库 上打开一个issue或pull request。

致谢

• 感谢所有让这个插件成为可能的贡献者。

许可证

该项目在MIT许可证下发布 - 详情请见 LICENSE 文件。

完整示例Demo

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.cyanAccent,
        appBar: AppBar(
          title: const Text('Linxford Icons Demo'),
        ),
        body: const UpdateDemo(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Yelo.icon("outline/home",
        size: 150,
        color: Colors.blue,
        alignment: Alignment.topRight,
        textDirection: TextDirection.ltr,
        semanticLabel: 'No name');
  }
}