iconfont_builder 0.2.2

便捷生成 Iconfont 图标字体在用于 Flutter #

iconfont.com 有 500w 个图标,而且各个公司的设计师还在源源不断的为其增加新的图标,此库仅为了更便捷的在 Flutter 中使用 Iconfont 字体图标库

准备工作 #

iconfont.com 网站选择上下载字体包,解压并拷贝 demo_index.htmliconfont.ttf 到项目中

- your-project
    - ios
    - android
    - lib
    - fonts
      # 根据此 html 文件进行解析,所以编译前需要保留
      demo_index.html
      iconfont.ttf

编辑 pubspec.yaml, 引用文字资源

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

安装 iconfont_builder 至 dart 全局 #

请确保电脑有 dart 环境,如果没有请执行安装 dart:

$ brew install dart

将 iconfont_builder 安装至 dart 全局,作为命令行工具进行使用:

$ pub global activate iconfont_builder

在 Flutter 中使用 Iconfont #

使用 iconfont_builder 编译 Iconfont.dart 文件

$ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart

可以浏览一下刚刚生成的 lib/Iconfont.dart, 里面其实就是图标名的映射:

class Iconfont {
    // iconName: all
  static const all = IconData(
    0xe697,
    fontFamily: 'Iconfont',
    matchTextDirection: true,
  );

  // iconName: back
  static const back = IconData(
    0xe698,
    fontFamily: 'Iconfont',
    matchTextDirection: true,
  );
  ...

将图标名作为属性有一个好处就是使用起来 dart 会有很好的提示, 并且 const 属性会在 AOT 编译时就进行处理,有着更好的性能

有的图标命名很随意,甚至有中文名称,iconfont_builder 已经将不符合 dart 命名规范的名称都做了格式化,并且保留了原有的名称作为注释。

import './Iconfont.dart';

void main() {
  // iconfont 中的图标名字都会映射置 Iconfont 对象中
  // Iconfont.local 是一个 IconData 对象
  final theIcon = Icon(Iconfont.local);
  // ...
}

自定义 Iconfont 类名 #

默认的类名为 Iconfont,编译时,添加 --class 类名 命令,可替换 Iconfont 类名

$ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart --class Icn

然后用新的类名进行引用:

import './Iconfont.dart';

void main() {
  final theIcon = Icon(Icn.name);
}

自定义字体名 #

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

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

$ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart --family OtherIcon

然后编辑 pubspec.yaml, 引用刚刚设定的字体名

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

使用 Icon 组件模式 #

默认编译的是 IconData 对象,这和 Flutter 默认的 Icons 使用习惯一致,如果需要更简短的使用,可以直接编译成 Icon 组件。

使用 iconfont 编译 Iconfont.dart, 添加 --type Icon 命令:

$ iconfont_builder --type Icon --from ./fonts --to ./lib/Iconfont.dart
import './Iconfont.dart';

void main() {
  // 此时,Iconfont.name 是一个函数,直接返回一个 Icon 组件
  final theIcon = Iconfont.data();
}

查看帮助 #

$ iconfont_builder --help

[0.2.2] - 更新 README

[0.2.1] - 添加 font-name 的配置参数

  • 修改 --name 为 --class
  • 添加 --family 用于自定义字体名
  • 更新相应的 README

[0.2.0] - IconData 编译为 const 属性

[0.1.9] - 修改 README

[0.1.8] - 修改 args 版本依赖

[0.1.7] - 关联仓库和 github 的地址

[0.1.6] - 修改类的参数和 Icon 参数一致

[0.1.5] - 修改 README

[0.1.4] - 添加 --name 参数

  • --name 用于替换 Iconfont 类名

[0.1.3] - 添修复 args --help

[0.1.2] - 添加原始 icon-name 作为注释

[0.1.1] - 修复 linux 路径

[0.1.0] - 编译 Icon 和 IconData 两种 dart 对象

  • TODO: 发布项目

Use this package as an executable

1. Install it

You can install the package from the command line:


$ pub global activate iconfont_builder

2. Use it

The package has the following executables:


$ iconfont_builder
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
94
Overall:
Weighted score of the above. [more]
49
Learn more about scoring.

We analyzed this package on Sep 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.0
  • pana: 0.12.21

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance suggestions

The package description is too short. (-6 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.0 <3.0.0
args ^1.5.1 1.5.2
lpinyin ^1.0.7 1.0.7