在 Flutter 中使用 iconfont

在Flutter开发中，使用字体图标必不可少，虽然Flutter也给我们提供了很多内置icon，但是在实际开发中还是会使用到自定义图标。

官方图标

iconfont 对于前端开发来说并不陌生，这篇文章将演示如何在Flutter中使用 iconfont

第一步 下载

打开 iconfont 官网，登录然后创建项目，挑选合适的图标，先加入购物车，在添加到项目中，全部选择好点击下载到本地。（这步太简单就不演示了）

第二步 配置

找到下载下来的文件打开，有一个 **.ttf** 的文件，复制到 Flutter 项目存放静态文件夹下。
在 `pubspec.yaml` 下的 fonts:

fonts:
    - family: IconFont
      fonts:
        - asset: assets/iconfont/iconfont.ttf

第三步 使用

直接使用：

image

Icon( IconData(0xe6ab, fontFamily: 'IconFont'),size: 40)

推荐使用方式：

由于我们项目中会使用很多图标，如果直接使用，后期不好维护，建议是将字体图标封装到一个文件里统一管理

示例：

在 util 文件夹下创建一个 icon 文件

class IconUtil {
   static const IconData male = IconData(
     0xe68d,
     fontFamily: 'IconFont' // IconFont是pubspec.yaml的命名
  );
  static const IconData female = IconData(
      0xe68b,
      fontFamily: 'IconFont'
  );
}

使用：

/// 引入
'util/icon.dart'
/// 使用
Icon(IconUtil.male)