Iconfont.com is a vector gallery produced by Alibaba

Advantages: It can be compiled into IconData and Icon components and other options, can map the original Icon file name to dart file, and automatically convert Chinese to Pinyin; You can customize font family and component name. The generated IconData will not have duplicate names or special characters that can be used in multiple projects.

1. Prepare

1.1 First of all, I need to add the vector icon that I need to put on iconfont.com UI, and then download it through the code.

Copy demo_index. HTML and iconfont. TTF to the project

Directory as follows

1.3 Add in pubspec.yaml:

fonts:
   - family: Schyler
     fonts:
       - asset: fonts/iconfont.ttf
Copy the code

1.4 Ensure that the DART environment is installed on the PC. If the DART environment is not installed, you can install iconfont_Builder through BREW 1.5 and run pub Global Activate Iconfont_Builder to install iconfont_Builder globally

2. Use Iconfont in Flutter

$iconfont_builder –from./fonts –to./lib/Iconfont. An Iconfont file is generated

Class Iconfont {// static const fangdajing = IconData(0xe602, fontFamily: 'Iconfont', matchTextDirection: true, ); // Static const Jingyin = IconData(0xe60e, fontFamily: 'Iconfont', matchTextDirection: true,); Static Const Jingyin1 = IconData(0xe620, fontFamily: 'Iconfont', matchTextDirection: true,); // static Const Jingyin1 = IconData(0xe620, fontFamily: 'Iconfont', matchTextDirection: true,); }Copy the code

The code above is a map to the corresponding image

Package: 2.2 use import head import ‘flutterTest01 / Iconfont dart’; Use final theIcon = Icon(Iconfont. Banquan);

3 Customize the font name

Iconfont_builder uses Iconfont as font family by default, but sometimes we may use more than one font at a time, in which case we need to customize the font name.

At compile time, add the –family font name command to replace the Iconfont name:

$iconfont_builder –from./fonts –to./lib/Iconfont. Dart –family OtherIcon Then edit pubspec.yaml and reference the font name you just set