便捷生成 Iconfont 圖示字型在用於 Flutter

超級大柱子發表於2019-05-24
Flutter

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 至 dart 全域性

請確保電腦有 dart 環境，如果沒有請執行安裝 dart：

$ brew install dart
複製程式碼

將 iconfont_builder 安裝至 dart 全域性，作為命令列工具進行使用:

$ pub global activate iconfont_builder
複製程式碼

在 Flutter 中使用 Iconfont

使用 IconData 模式

使用 iconfont_builder 編譯 Iconfont.dart 檔案

$ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart
複製程式碼

可以瀏覽一下剛剛生成的 lib/Iconfont.dart, 裡面其實就是圖示名的對映

將圖示名作為屬性有一個好處就是使用起來 dart 會有很好的提示

有的圖示命名很隨意，甚至有中文名稱，iconfont_builder 已經將不符合 dart 命名規範的名稱都做了格式化，並且保留了原有的名稱作為註釋。

import './Iconfont.dart';

void main() {
  // iconfont 中的圖示名字都會對映置 Iconfont 物件中
  // Iconfont.local 是一個 IconData 物件
  final theIcon = Icon(Iconfont.local);
  // ...
}
複製程式碼

便捷生成 Iconfont 圖示字型在用於 Flutter

使用 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();
}
複製程式碼

使用更短的類名

編譯時，新增 --name 類名 命令，替換 Iconfont 類名

$ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart --name Icn
複製程式碼
import './Iconfont.dart';

void main() {
  final theIcon = Icon(Icn.name);
}
複製程式碼

檢視幫助

$ iconfont_builder --help
複製程式碼

相關文章