Flutter 快速導入大量iconfont資源

flutter_iconfont

www.iconfont.cn/ 爲咱們提供了海量的矢量圖標資源，在Flutter中使用這些資源也還方便，可是在下載大量資源後，仍然須要手動作一些事情，這不符合程序員能偷懶就偷懶的精神，因此我作了這個簡單工具，但願對你們有所幫助。

flutter_iconfont 傳送門

使用說明

1. 使用git clone 或者直接download zip文件到本地

2. 進入iconfont網站，選取想要的icon到購物車，最後【下載代碼】

   

3. 將下載的壓縮包解壓到任意目錄，或者解壓到flutter_iconfont工程的tool目錄下，以下圖所示。注意，如解壓到其餘任意目錄下，在第4步運行生成工具時，須要傳入解壓路徑

   

4. 進入tool目錄，執行python generate.py，生成dart文件。注意，如解壓到其餘目錄，執行時需帶上解壓的目錄 python generate.py "dir path"。 關於Python環境的問題，generate.py同時兼容py2和py3，一般Mac os都自帶有Python環境，但可能未安裝BeautifulSoup庫，在運行腳本前，能夠經過如下命令安裝python -m pip install beautifulsoup4; Windows用戶如從未安裝過Python環境，建議直接使用我編譯好的exe程序，下載解壓後將generate.exe拷貝至tool目錄下點擊便可執行。如須要指定資源目錄，在tool目錄下打開cmd命令行，執行generate "dir path"指定下載的icon資源目錄

5. 進入lib目錄下查看flutter_iconfont.dart文件，以下例子所示，將變量修改成適當的名字，這一步很重要，若是在iconfont中搜索的icon資源都是中文名，則生成的變量也是中文名，應修改成英文字母，還應當檢查是否存在變量同名狀況，確認IconFonts類無誤便可。建議打開解壓資源包中的html文件，對照圖標進行變量命名

class IconFonts{
  IconFonts._();

  static const IconData arrow_down = const IconDataEx(0xe623);
  static const IconData arrow_down = const IconDataEx(0xe61a);
  static const IconData arrow_down = const IconDataEx(0xe776);
  static const IconData Arrow_down = const IconDataEx(0xe62e);
  static const IconData Arrow_down_1 = const IconDataEx(0xe6bd);
  static const IconData Arrow_down_4 = const IconDataEx(0xe6be);
  static const IconData Arrow_down_3 = const IconDataEx(0xe6bf);
  static const IconData Arrow_down_2 = const IconDataEx(0xe6c1);
}

複製代碼

6. 本地離線庫已準備穩當，在項目工程的pubspec.yaml中添加本地庫便可使用。將 path 指向你下載的flutter_iconfont庫的實際路徑，更新一下yaml配置文件

dependencies:
  flutter_iconfont:
    path: F:\git_code\flutter_iconfont
複製代碼

7. 代碼使用

import 'package:flutter_iconfont/flutter_iconfont.dart';

return Center(child:Icon(IconFonts.Arrow_down))
複製代碼

歡迎關注個人公衆號：編程之路從0到1