如何在flutter中使用iconfont資源

如何在flutter中使用iconfont資源

1. 資源獲取

• 在 iconfont 中找到自己的專案中要使用的資源

• 下載資源

• 資源匯入在專案中

• 專案中依賴資源

2. 專案中使用

注意:在使用圖片資源時，需要把&#替換為0

• 可以單獨使用,使用IconData元件引用

Icon(IconData(0xe9e2, fontFamily: 'appFonts'))
複製程式碼

• 批量生成，統一資源生成dart檔案

1. 如果沒有全域性配置dart環境需要執行

brew install dart
複製程式碼

2. 配置命令

pub global activate iconfont_builder
複製程式碼

3. 配置完成之後需要在終端根據提示匯入命令

4. 根據命令生成圖片資源

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

5. 自定義類名需要在上條命令最後加入 --class 類名

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

6. 自定義字型名。有時候我們可能同時使用多個字型, 此時我們需要自定義字型名。新增 --family 字型名 命令，替換 Iconfont 字型名

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

fonts:
  - family: OtherIcon
    fonts:
      - asset: fonts/iconfont.ttf
複製程式碼

7. 使用命令直接生成Icon元件，在使用時可以直接使用

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