iconfont_builder 1.0.4

Convenient generation of icoont icon font for flutter #

查看中文文档

iconfont.com have 500 million icons, and designers of various companies are constantly adding new icons to it. This library is only for the convenience of using iconfont.com Font Icon Library in flutter.

  • It can be compiled into various options such as icon data and icon components
  • The name in the original icon file can be mapped to dart file and automatically converted to Pinyin
  • Font family and component name can be customized
  • The generated icondata will not have duplicate names or special characters
  • Used in multiple projects

Preparation #

Download the font package from the iconfont.com website selection, extract and copy demo_index.html and iconcont.ttf to the project.

- your-project
    - ios
    - android
    - lib
    - fonts
      # Parse according to this HTML file, so you need to keep it before compiling
      demo_index.html
      iconfont.ttf

Edit pubspec.yaml, import fonts file:

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

Install iconfont_builder to dart global #

Make sure your computer has a dart environment. If not, install dart:

$ brew install dart

Install iconfont_builder to dart global as a command-line tool:

$ pub global activate iconfont_builder

Use Iconfont in Flutter #

Use iconfont_builder build Iconfont.dart file:

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

You can browse the generated lib/iconcont.dart, which is actually the mapping of icon names:

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

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

One of the advantages of using icon name as an attribute is that dart will have a good prompt, and const attribute will be processed at AOT compilation time, with better performance

Some icons are named casually, even in Chinese. iconfont_builder has formatted the names that do not conform to dart naming specification, and kept the original names as comments.

import './iconfont.dart';

void main() {
  // Icon names in iconfont are mapped to iconfont objects
  // Iconfont.local is a IconData
  final theIcon = Icon(Iconfont.local);
  // ...
}

Custom iconcont class name #

The default class name is iconcont. When compiling, add the command '-- class class name', which can replace the 'iconcont' class name

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

Then reference with the new class name:

import './Iconfont.dart';

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

Custom font name #

iconfont_builder uses iconfont as font-family by default. Sometimes we may use multiple fonts at the same time. At this time, we need to customize the font name.

During compilation, add the command --family <font-name> action,replace Iconfont font-family:

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

Then edit pubspec.yaml and reference the font name just set

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

Use Icon Widget pattern #

The icondata object is compiled by default, which is consistent with the habit of using the default icons of flutter. If you need to use it more briefly, you can directly compile it into an icon widget.

Use iconcont to compile iconcont.dart, and add -- type Icon command:

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

void main() {
  // At this time, Iconcont.name is a function that directly returns an icon component
  final theIcon = Iconfont.data();
}

View help #

$ iconfont_builder --help

[1.0.4] - 更新说明

[1.0.3] - 更新说明

[1.0.2] - 更新说明

[1.0.1] - Add English Document

[1.0.0] - 更新说明

[0.2.3] - 修复最后一个 icon 没有加载

[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]
70
Overall:
Weighted score of the above. [more]
44
Learn more about scoring.

We analyzed this package on Feb 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5

Health suggestions

Fix bin/iconfont_builder.dart. (-0.50 points)

Analysis of bin/iconfont_builder.dart reported 1 hint:

line 13 col 31: Unnecessary new keyword.

Maintenance issues and suggestions

The description contains too many non-ASCII characters. (-20 points)

The site uses English as its primary language. The value of the description field in your package's pubspec.yaml field should primarily contain characters used in English.

The description is too long. (-10 points)

Search engines display only the first part of the description. Try to keep the value of the description field in your package's pubspec.yaml file between 60 and 180 characters.

Dependencies

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