Flutter 批量引入阿里巴巴矢量图库（iconfont.cn）图标

准备工作

1. 在iconfont.cn创建一个项目，然后找到需要的图标，点击加入购物车，添加到项目中。

2. 进入【我的项目】，选中项目，点击【Font class】，可以生成在线链接，这是一个以.css结尾的链接，当编辑了项目中的图标以后，要重新生成。

3. 此链接放到Flutter项目中，可以快速生成相关的字体文件以及 IconData引用，不必手动下载图标文件。

配置 iconfont_convert

iconfont_convert项目的文档，写得有点问题，下面记录一下正确的使用步骤。

在项目中添加 iconfont_convert 依赖

有2种方式添加：

1. 命令行添加（推荐）

flutter pub add dev:iconfont_convert

2. 直接编辑pubspec.yaml

pubspec.yaml

dev_dependencies:
  iconfont_convert: ^1.0.2

编辑配置文件

有2种方式配置：

1. 将配置写在pubspec.yaml中

pubspec.yaml

iconfont:
  - icons:
      - url: //at.alicdn.com/t/c/font_123455_xxxx.css
        icon_name: my_icons # 字体文件名，Dart文件名
        icon_class: MyIcons # Dart类名
        font_family: MyFont # 指定字体的 Font Family
        # package: some_name # 可指定包名
    font_assets_path: assets/iconfont/ # 生成.ttf字体文件的保存路径
    icon_class_path: lib/icons/ # 生成Dart代码文件的保存路径

2. 将配置写在单独的文件iconfont.yaml中（推荐）

iconfont.yaml

# dart run iconfont_convert --config iconfont.yaml
- icons:
    - url: //at.alicdn.com/t/c/font_123455_xxxx.css
      icon_name: my_icons # 字体文件名，Dart文件名
      icon_class: MyIcons # Dart类名
      font_family: MyFont # 指定字体的 Font Family
      # package: some_name # 可指定包名
  font_assets_path: assets/iconfont/ # 生成.ttf字体文件的保存路径
  icon_class_path: lib/icons/ # 生成Dart代码文件的保存路径

代码中的//at.alicdn.com/t/c/font_123455_xxxx.css是在iconfont.cn【我的项目】中获取的字体在线链接。

命令行一键生成

如果配置写在pubspec.yaml中：

dart run iconfont_convert

如果配置写在单独的iconfont.ymal中：

dart run iconfont_convert --config iconfont.yaml

生成的文件

字体文件

会在assets/iconfont/目录中生成一个my_icons.ttf文件，这里的目录名、文件名都在配置中指定。

这是一个字体文件。

会在pubspec.yaml中，自动插入引用字体文件的代码：

pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - assets/
  fonts:
    - family: MyFont
      fonts: 
        - asset: assets/iconfont/my_icons.ttf

IconData代码

会在lib/icons/目录中生成一个my_icons.dart文件，这里的目录名、文件名都在配置中指定。

这里的代码，用于读取上面的字体文件。

my_icons.dart的内容如下：

my_icons.dart

//  This file is automatically generated. DO NOT EDIT, all your changes would be lost.
//  https://pub.dartlang.org/packages/iconfont_convert

import 'package:flutter/material.dart';

class MyIcons {
  static const String _family = 'MyFont';
  
  MyIcons._();
  
  static const IconData a_mianxingaixin = IconData(0xe60a, fontFamily: _family); // 面性 爱心
  static const IconData a_teshuxuanzhongkuang = IconData(0xe60e, fontFamily: _family); // 特殊 选中框
  static const IconData morentouxiang = IconData(0xe616, fontFamily: _family); // 默认头像
  static const IconData morentouxiang_1 = IconData(0xe654, fontFamily: _family); // 默认头像
  static const IconData renzhengyonghu = IconData(0xe600, fontFamily: _family); // 认证用户
  static const IconData vip = IconData(0xe65e, fontFamily: _family); // vip
  static const IconData vip_fill = IconData(0xe872, fontFamily: _family); // vip-fill
}

class _PreviewIcon {
  const _PreviewIcon(this.icon, this.name, this.propName);

  final IconData icon;
  final String name;
  final String propName;
}

class MyIconsPreview extends StatelessWidget {
  const MyIconsPreview({Key? key}) : super(key: key);

  static const iconList = <_PreviewIcon>[
    _PreviewIcon(MyIcons.a_mianxingaixin, "a_mianxingaixin", "面性 爱心"),
    _PreviewIcon(MyIcons.a_teshuxuanzhongkuang, "a_teshuxuanzhongkuang", "特殊 选中框"),
    _PreviewIcon(MyIcons.morentouxiang, "morentouxiang", "默认头像"),
    _PreviewIcon(MyIcons.morentouxiang_1, "morentouxiang_1", "默认头像"),
    _PreviewIcon(MyIcons.renzhengyonghu, "renzhengyonghu", "认证用户"),
    _PreviewIcon(MyIcons.vip, "vip", "vip"),
    _PreviewIcon(MyIcons.vip_fill, "vip_fill", "vip-fill"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MyIcons'),
      ),
      body: GridView.count(
        shrinkWrap: true,
        crossAxisCount: 4,
        children: iconList.map((e) {
          return InkWell(
            onTap: () {
              //
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  margin: const EdgeInsets.only(bottom: 8),
                  child: Icon(e.icon),
                ),
                Text(e.name, style: const TextStyle(fontSize: 12), overflow: TextOverflow.ellipsis, maxLines: 1),
                Text(e.propName, style: const TextStyle(fontSize: 12), overflow: TextOverflow.ellipsis, maxLines: 1),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

从生成的代码中，可以使用MyIcons类，引用所有的图标，类型是IconData。

并且，还生成了一个MyIconsPreview类，是一个Widget，可用于预览所有的图标，便于调试，非常方便。