Flutter图标生成插件icon_generator的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter图标生成插件icon_generator的使用

Icon Generator

Forked from icon_generator

将所有*.svg图标从目录转换为图标字体（.ttf），并生成与Flutter兼容的dart类。

它是NodeJs包fantasticon的抽象层。

Requirements

Node.JS v11+

Install:

$ pub global activate icon_generator

Params:

    • 必填项
  • –from * - 输入包含svg文件的目录
  • –out-font * - 输出图标字体路径（例如：lib/font.ttf）
  • –out-flutter * - 输出Flutter图标类路径（例如：lib/icons.dart）
  • –class-name * - 类名也是在pubspec.yaml中使用的字体名称（作为字体名称）
  • –height - 固定字体高度值，默认为512
  • –descent - 应用于基线的偏移量，默认为240
  • –package - 生成图标数据的包名称（了解更多）
  • –indent - 生成dart文件的缩进，例如：’ ‘，默认为’ ’
  • –normalize - 规范化图标大小，默认为false
  • –yarn - 使用yarn代替npm，默认为false
  • –naming-strategy - 图标命名策略：snake（yaru_icon）或camel（yaruIcon），默认为snake

Example

文件结构：

project
└───icons
│   │   account.svg
│   │   arrow_left.svg
│   │   arrow_right.svg
│   │   collection.svg
│   
└───lib
│   │   icon_font
│   │   widgets

运行命令：

$ icon_generator --from=icons --class-name=UiIcons --out-font=lib/icon_font/ui_icons.ttf --out-flutter=lib/widgets/icons.dart

生成结果：

project
└───icons
│   │   account.svg
│   │   arrow_left.svg
│   │   arrow_right.svg
│   │   collection.svg
│   
└───lib
│   └───widgets
│   |   │   icons.dart
│   │
│   └───icon_font
│       │   ui_icons.ttf

生成的icons.dart：

// 自动生成的代码 - 请勿手动修改

import 'package:flutter/widgets.dart';

@immutable
class _UiIconsData extends IconData {
  const UiIconsData(int codePoint)
      : super(
          codePoint,
          fontFamily: 'UiIcons',
        );
}

@immutable
class UiIcons {
  const UiIcons._();

  static const IconData account = _UiIconsData(0xe000);
  static const IconData arrowLeft = _UiIconsData(0xe001);
  static const IconData arrowRight = _UiIconsData(0xe002);
  static const IconData collection = _UiIconsData(0xe003);
}

还需要在pubspec.yaml中添加字体：

...

flutter:
  fonts:
    - family: UiIcons
      fonts:
        - asset: lib/src/icon_font/ui_icons.ttf

更多关于Flutter图标生成插件icon_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图标生成插件icon_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用icon_generator插件来生成图标的示例代码。请注意，icon_generator可能是一个假设的插件名称，因为Flutter社区中具体的图标生成插件可能有所不同。不过，这个示例将展示如何使用一个假想的图标生成插件来生成图标。

首先，确保你已经在pubspec.yaml文件中添加了icon_generator插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  icon_generator: ^x.y.z  # 替换为实际的版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以使用以下代码来生成图标。以下是一个简单的例子，展示如何在main.dart文件中使用图标生成插件：

import 'package:flutter/material.dart';
import 'package:icon_generator/icon_generator.dart'; // 假设的插件导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icon Generator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  IconData? generatedIcon;

  @override
  void initState() {
    super.initState();
    // 假设的图标生成方法，具体实现依赖于插件的API
    generateIcon();
  }

  void generateIcon() async {
    // 这里假设插件提供了一个名为generateIconData的静态方法
    // 该方法接受一些参数并返回一个Future<IconData>
    generatedIcon = await IconGenerator.generateIconData(
      name: 'custom_icon', // 图标的名称或标识符
      color: Colors.black, // 图标的颜色
      size: 24, // 图标的尺寸
    );

    // 更新UI
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Generator Demo'),
      ),
      body: Center(
        child: generatedIcon != null
            ? Icon(
                generatedIcon!,
                size: 48,
              )
            : CircularProgressIndicator(), // 在图标生成过程中显示加载指示器
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，该应用在启动时调用generateIcon方法来生成一个图标。我们假设IconGenerator插件提供了一个静态方法generateIconData，该方法接受一些参数（如名称、颜色和大小）并返回一个Future<IconData>。一旦图标生成完成，我们就使用setState方法来更新UI，显示生成的图标。

请注意，由于icon_generator可能不是一个实际存在的插件，因此你需要根据你所使用的实际图标生成插件的API来调整上述代码。大多数图标生成插件都会提供类似的静态方法来生成图标数据，你只需要查阅该插件的文档来了解其具体的用法和API。

回到顶部