Flutter图标字体管理插件iconfont的使用

只需一行命令，即可快速生成https://www.iconfont.cn/的Icon文件。

特点

支持多个 iconfont 项目。
自动识别 family
可自动在 pubspec.yaml 中注册字体
支持 font class 链接生成文件

运行

方式1

安装

flutter pub global activate iconfont

或者

dart pub global activate iconfont

指定版本安装

flutter pub global activate iconfont $version

或者

dart pub global activate iconfont $version

卸载

flutter pub global deactivate iconfont

或者

dart pub global deactivate iconfont

使用

iconfont

方式2

安装

在 pubspec.yaml 中添加

dev_dependencies:
  iconfont: #latest version

使用

flutter packages pub run iconfont

参数

-c, --css        font css的链接,例如(http://at.alicdn.com/t/font_1500681_sz0skwerbw.css)
                 (defaults to "")
-d, --dir        自动生成的assets文件夹名
                 (defaults to "")
-i, --in         iconfont文件所在目录
                 (defaults to "assets/fonts/")
-o, --out        生成后文件存放目录
                 (defaults to "lib/icons/")
-p, --package    fontPackage
                 (defaults to "")
    --config     config file path
                 (defaults to "pubspec.yaml")
-h, --help       help

常见问题

iconfont command not found

例子

example
https://0hy3e2.coding-pages.com

场景1

通过 Font css 链接生成 Icon 文件

运行

iconfont -c http://at.alicdn.com/t/font_1500681_sz0skwerbw.css -d my_icons

场景2

下载 .zip 文件，手动创建文件夹，将 iconfont.json 和 iconfont.ttf 文件放入新创建的文件夹中。

运行

iconfont

场景3

使用配置文件 `pubspec.yaml`

# pubspec.yaml
iconfont:
  - icons: 
    - css: //at.alicdn.com/t/font_1500681_sz0skwerbw.css
      dir: test_icons
    in: assets/fonts2
    out: lib/icons/

  - icons: 
    - css: //at.alicdn.com/t/font_1500681_sz0skwerbw.css
      dir: my_icons

  - icons:
    - css: //at.alicdn.com/t/font_1932408_c19dd499jfh.css
      dir: my_icons2

运行

iconfont

新建配置文件 `iconfont.yaml`

# iconfont.yaml
- icons: 
    - css: //at.alicdn.com/t/font_1500681_sz0skwerbw.css
      dir: my_icons
      package: myPackage
  in: assets/fonts0/
  out: lib/xxicon

- icons: 
    - css: //at.alicdn.com/t/font_1500681_sz0skwerbw.css
      dir: test_icons
  in: assets/fonts1/
  out: lib/xxicon

- icons: 
    - css: //at.alicdn.com/t/font_1500681_sz0skwerbw.css
      dir: test_icons
  in: assers/fonts2
  out: lib/icons/

- icons: 
    - css: //at.alicdn.com/t/font_1500681_sz0skwerbw.css
      dir: my_icons

运行

iconfont --config iconfont.yaml

示例代码

// example/lib/main.dart
import 'package:example/icons/my_icons.dart';
import 'package:example/icons/test_icons.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Icon(TestIcons.Myicon_Zhire), // 使用 test_icons 中的图标
        ),
        body: Align(
          child: Icon(MyIcons.Myicon_Zhileng), // 使用 my_icons 中的图标
        ),
      ),
    );
  }
}

更多关于Flutter图标字体管理插件iconfont的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼

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

在Flutter项目中，使用iconfont插件来管理图标字体是一个常见的做法。以下是如何在Flutter项目中集成和使用iconfont的详细步骤，包括相关代码示例。

1. 准备图标字体文件

首先，你需要从图标字体库（如Iconfont）下载你的图标字体文件（通常是.ttf格式）。

2. 将字体文件添加到Flutter项目

将下载的.ttf文件放置在你的Flutter项目的assets/fonts/目录下（如果没有这个目录，请创建它）。例如，假设你的文件名是iconfont.ttf。

3. 更新`pubspec.yaml`文件

在pubspec.yaml文件中，添加你的字体文件到fonts部分，并指定一个别名（family）。同时，添加对flutter_icons包的依赖（如果你打算使用预定义的图标集，这一步可以省略，但这里我们专注于自定义图标字体）。

flutter:
  assets:
    - assets/fonts/iconfont.ttf
  fonts:
    - family: MyIconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf

4. 安装`iconfont`依赖（可选）

虽然Flutter本身不需要额外的iconfont插件来加载自定义图标字体，但如果你想要更方便地管理和使用图标，可以考虑使用第三方库，如flutter_iconfont。不过，这里我们仅使用Flutter原生功能。

5. 生成图标映射文件（可选）

为了更方便地使用图标，你可以使用工具（如Iconfont的在线工具或第三方库提供的工具）生成一个包含所有图标Unicode码的映射文件（通常是Dart文件）。假设你手动创建了一个iconfont.dart文件，内容如下：

class IconFont {
  static const String home = "\uE800";
  static const String settings = "\uE801";
  // 添加更多图标映射...
}

6. 在Flutter代码中使用图标字体

现在你可以在你的Flutter代码中使用自定义图标字体了。下面是一个示例：

import 'package:flutter/material.dart';
import 'iconfont.dart'; // 导入你生成的图标映射文件（如果有）

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('IconFont Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(
                IconData(
                  0xE800, // 使用图标的Unicode码
                  fontFamily: 'MyIconFont', // 字体家族名
                ),
                size: 48,
              ),
              SizedBox(height: 20),
              Text(
                'Home Icon',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 20),
              Icon(
                IconData(
                  0xE801, // 使用另一个图标的Unicode码
                  fontFamily: 'MyIconFont', // 字体家族名
                ),
                size: 48,
              ),
              SizedBox(height: 20),
              Text(
                'Settings Icon',
                style: TextStyle(fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们直接在Icon组件中使用IconData类，传入图标的Unicode码和字体家族名来显示图标。如果你使用了图标映射文件，你可以更简洁地引用图标，例如：

Icon(
  IconData(IconFont.home.codeUnits.first, fontFamily: 'MyIconFont'),
  size: 48,
),

注意：IconFont.home.codeUnits.first 是获取字符串第一个字符的Unicode码的方式，但通常映射文件中直接给出Unicode码更为直接。这里假设你映射文件中给出的是直接的Unicode码，则可以直接使用IconData(IconFont.home, fontFamily: 'MyIconFont')。

通过上述步骤，你就可以在Flutter项目中成功集成并使用自定义的图标字体了。

Flutter图标字体管理插件iconfont的使用