Flutter | Icon | 如何使用自己做的圖標？

持續的學習紀錄

基本的內建圖標使用方式#

---

第一步：製作自己的圖標檔案，導出svg格式#

第二步：開啟FlutterIcon網頁#

https://www.fluttericon.com/

第三步：拖拉svg檔到網頁，接著選取後下載到電腦#

第四步：解壓縮檔案#

預設

更改檔名

第五步：將檔案拖拉、加入到專案中#

1. 移動 ttf 檔案到fonts資料夾 (e.g. fonts/MyFlutterApp.ttf)
2. 移動dart檔案到指定的位置(e.g. lib/my_flutter_app_icons.dart)

更改檔名，順便統一類別名稱跟Family名稱

第六步：修改pubspec.yaml，允許存取fonts資料夾#

• 多個font檔

第七步：替換上自己的Icon，重新運行#

簡單的自定義圖標使用就這樣完成了！

參考：#

https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977