iconfont_builder2

Description:

iconfont builder2

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
copied to clipboard
Edit pubspec.yaml, import fonts file:
fonts:
- family: Iconfont
fonts:
- asset: fonts/iconfont.ttf
copied to clipboard
Install iconfont_builder to dart global #
Make sure your computer has a dart environment. If not, install dart:
$ brew install dart
copied to clipboard
Install iconfont_builder to dart global as a command-line tool:
$ pub global activate iconfont_builder
copied to clipboard
Use Iconfont in Flutter #
Use iconfont_builder build Iconfont.dart file:
$ iconfont_builder --from ./fonts --to ./lib/iconfont.dart
copied to clipboard
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,
);
...
copied to clipboard
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);
// ...
}
copied to clipboard

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
copied to clipboard
Then reference with the new class name:
import './Iconfont.dart';

void main() {
final theIcon = Icon(Icn.name);
}
copied to clipboard
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
copied to clipboard
Then edit pubspec.yaml and reference the font name just set
fonts:
- family: OtherIcon
fonts:
- asset: fonts/iconfont.ttf
copied to clipboard
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
copied to clipboard
import './Iconfont.dart';

void main() {
// At this time, Iconcont.name is a function that directly returns an icon component
final theIcon = Iconfont.data();
}
copied to clipboard
View help #
$ iconfont_builder --help
copied to clipboard