阿里巴巴图标库的官网：https://www.iconfont.cn

背景

阿里巴巴图标库官网 iconfont.cn 上有很多字体图标素材， 我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在 Flutter 中， 我们使用 ttf 格式即可。

阿里巴巴图标库下载图标

在阿里巴巴图标库中，搜索想要的图标，例如“服务”和“扫码”，选择一个想要的图标，加入购物车：

等搜索完想加入的图标后，点击右上角的“购物车”图标：

点击“下载代码”：

在项目中配置图标库的使用

• 1. 在项目的根目录中，创建一个文件夹assets
• 2. 在文件夹assets 下创建一个新的文件夹fonts
• 3. 把第二步下载的资源，解压，把iconfont.json和iconfont.ttf文件拖入到 文件夹fonts下

• 4. 在文件pubspec.yaml中配置图标图

fonts:
    # 自定义一个 名字
    - family: fangXMIcon
      fonts:
      - asset: assets/fonts/iconfont.ttf # 图标图的路径

如下图：

• 5. 创建一个新的dart文件，名字可以自己取，我这边叫做：FangXMIcon.dart

import 'package:flutter/material.dart';

// FangXMIcon 这个类的名称可以修改
class FangXMIcon {

  // 小米的图标
  static const IconData xiaomiIcon = IconData(
    0xe609,
    fontFamily: "fangXMIcon",
    matchTextDirection: true
  );
  
  // 扫描的图标
  static const IconData saomiao = IconData(
    0xe65c,
    fontFamily: "fangXMIcon",
    matchTextDirection: true
  );
}

代码解析：

1. xiaomiIcon 是图标自定义的名称
2. 0xe609 这个是‘iconfont.json’文件中‘小米’图标对应的code码
   
3. fontFamily 对应的是第4步中pubspec.yaml配置的字体库名称
   
4. matchTextDirection 默认为true

• 6. 使用时，就用FangXMIcon.xxx 就可以了

Icon(FangXMIcon.xiaomiIcon, color: Colors.white)
Icon(FangXMIcon.saomiao, color: Colors.black26)