Flutter图标字体生成插件icon_font_gen的使用

Flutter图标字体生成插件icon_font_gen的使用

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

该插件作为NodeJs包fantasticon的抽象层。

要求

• Node.JS v11+

安装

$ pub global activate icon_font_gen

参数

• --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

示例

文件结构

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

运行命令

$ icon_font_gen --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

示例代码

import 'package:example/widgets/icons.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 此小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          leading: Icon(UiIcons.account),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            children: [
              UiIcons.account,
              UiIcons.arrow_left,
              UiIcons.collection,
              UiIcons.arrow_right,
            ]
                .map((iconData) => Padding(
                      padding: EdgeInsets.all(16),
                      child: Icon(iconData),
                    ))
                .cast<Widget>()
                .toList(),
          ),
        ),
      );
}