Iconfont

阿里妈妈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文件

将 iconfont.css 拖入即可生成

通过插件自动生成

不需要手动下载 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