在Flutter中使用Iconfont图标、字体

iconfont.com是阿里巴巴出品的一款矢量图库

它的优点： 可编译成 IconData 和 Icon 组件等多种选择，可将原有的图标文件中的名字映射至 dart 文件中，并且自动转化中文至拼音；可自定义 font-family、组件名；生成的 IconData 不会有重名或特殊字符 可以在多个项目中使用。

1. 准备

1.1 首先需要在iconfont.com中加购自己需要的后者UI放上去的矢量图图标，然后通过代码的方式下载下来。

1.2 解压拷贝demo_index.html和iconfont.ttf到项目中去

目录如下

1.3 在pubspec.yaml中增加：

fonts:
   - family: Schyler
     fonts:
       - asset: fonts/iconfont.ttf

1.4 确保电脑中安装了dart环境，若没有安装可以通过 brew安装 1.5 执行pub global activate iconfont_builder，将 iconfont_builder 安装至 dart 全局

2.在 Flutter 中使用 Iconfont

2.1 进入项目所在目录，使用 iconfont_builder 编译 Iconfont.dart 文件 $ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart，会生成一个Iconfont文件

    class Iconfont {
        // iconName: 放大镜
      static const fangdajing = IconData(
        0xe602,
        fontFamily: 'Iconfont',
        matchTextDirection: true,
      );
      // iconName: 静音
      static const jingyin = IconData(
        0xe60e,
        fontFamily: 'Iconfont',
        matchTextDirection: true,
      );
      // iconName: 静音
      static const jingyin1 = IconData(
        0xe620,
        fontFamily: 'Iconfont',
        matchTextDirection: true,
      );
    }

如上代码便是相对应图片的映射了

2.2 使用 导入头 import 'package:flutterTest01/Iconfont.dart'; 使用 final theIcon = Icon(Iconfont.banquan);

3自定义字体名

iconfont_builder 默认使用 Iconfont 作为 font-family, 而有时候我们可能同时使用多个字体, 此时我们需要自定义字体名。

编译时，添加 --family 字体名 命令，替换 Iconfont 字体名:

$ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart --family OtherIcon 然后编辑 pubspec.yaml, 引用刚刚设定的字体名