Flutter图标库插件feather_icons_svg的使用

Feather Icons SVG for Flutter

Feather Icons 是一个简单、友好的图标集合，现已移植到Flutter。这个包以SVG图片的形式渲染图标，这使得在运行时可以自定义图标的属性（如描边宽度等）。

使用方法

以下是一个简单的示例，展示如何在你的Flutter应用中使用feather_icons_svg包中的图标：

class MyExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FeatherIcon(
      FeatherIcons.calendar,
      color: Colors.red,
      size: 30,
      strokeWidth: 1.5,
    );
  }
}

你也可以使用FeatherIconTheme继承的小部件来为子树小部件定制默认值。

安装

将feather_icons_svg包添加到你的pubspec.yaml文件中：

flutter pub add feather_icons_svg

开发

要从原始的Feather Icons仓库中获取SVG图标，运行tool/fetch-icons.sh。

最后，为了生成源代码并创建带有每个图标命名构造函数的flutter_icons_svg.dart文件，运行tool/generator.dart。

示例代码

下面提供了一个完整的demo，你可以直接复制并在自己的项目中尝试：

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

void main() => runApp(const ExampleApp());

class ExampleApp extends StatelessWidget {
  const ExampleApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        iconTheme: IconThemeData(
          color: Colors.black,
        ),
      ),
      home: FeatherIconTheme(
        strokeWidth: 1.5,
        child: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

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: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconTheme(
              data: IconThemeData(color: Colors.green, size: 40),
              child: FeatherIcon(FeatherIcons.arrowLeft),
            ),
            FeatherIcon(FeatherIcons.arrowRight, size: 40),
            FeatherIcon(
              FeatherIcons.calendar,
              color: Colors.blue,
            ),
            FeatherIcon(FeatherIcons.arrowLeft),
            FeatherIcon(
              FeatherIcons.arrowRight,
              strokeWidth: 3,
            ),
            FeatherIcon(FeatherIcons.activity),
            FeatherIcon(
              FeatherIcons.bell,
              strokeWidth: 1.0,
            ),
          ],
        ),
      ),
    );
  }
}

这段代码创建了一个包含多个Feather Icons的应用程序界面，你可以根据需要调整图标颜色、大小和描边宽度等属性。希望这些信息对你有帮助！如果你有任何其他问题或需要进一步的帮助，请随时提问。