Iconfont

https://www.iconfont.cn/

阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

添加到Flutter项目中

手动添加到Flutter项目中

下载 iconfont.ttf 文件到项目 fonts（可修改）目录中
修改 pubspec.yaml 文件，配置字体文件

flutter:
  fonts:
    - family: iconfont # 从 iconfont.json 中获取
      fonts:
        - asset: fonts/iconfont.ttf

创建Iconfont类

import 'package:flutter/material.dart' show IconData;

/// 从 iconfont.json 中获取图标的 font_family，unicode
//{
//  "id": "1",
//  "name": "测试项目",
//  "font_family": "iconfont",
//  "css_prefix_text": "icon-",
//  "description": "",
//  "glyphs": [
//    {
//      "icon_id": "5729578",
//      "name": "自动",
//      "font_class": "zidong",
//      "unicode": "e7ee",
//      "unicode_decimal": 59374
//    }
//  ]
//}
class MyIcons {
  static const String _family = 'iconfont';

  MyIcons._();

  static const IconData IconZidong = IconData(0xe7ee, fontFamily: _family); // 自动
}

通过网页获取Dart文件

https://xwrite.gitee.io/blog/

将 iconfont.css 拖入即可生成

通过插件自动生成

https://pub.dev/packages/iconfont

不需要手动下载 iconfont.ttf,iconfont.css,iconfont.json 等文件。
不需要手动去 pubspec.yam 中配置字体。
不需要手动去创建Iconfont类。

仅需一行命令，就能自动实现以上3步。

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

//at.alicdn.com/t/font_1500681_sz0skwerbw.css 从下图处获得

image

安装方式

全局安装

flutter：flutter pub global activate iconfont
dart: pub global activate iconfont

命令行运行 iconfont ，所有Flutter项目均可使用

局部安装

修改 pubspec.yaml 文件

dev_dependencies:
  iconfont: #latest version

命令行运行 flutter packages pub run iconfont , 仅当前项目可使用

参数

-c, --css     font css的链接，例如(//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/")
-h, --help    help