如內置 Icons 通常地在 Flutter 中使用 Iconfont

iconfont.com 有 500w 個圖標，並且各個公司的設計師還在源源不斷的爲其增長新的圖標，此庫僅爲了更便捷的在 Flutter 中使用 Iconfont 字體圖標庫

準備工做

從 iconfont.com 網站選擇上下載字體包，解壓並拷貝 demo_index.html 和 iconfont.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 會有很好的提示

有的圖標命名很隨意，甚至有中文名稱，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
複製代碼