[Flutter]自帶Icon不夠用？那就使用自己的Icon吧！

最後更新於 2021 年 6 月 4 日

官方Icon 文檔：https://api.flutter.dev/flutter/material/Icons-class.html

Icon一覽：https://design.google.com/icons/

自帶的Icon雖然簡潔好看但數量實在太少，我自己做APP的時候沒找到合適的Icon使用所以上網找了其他免費的圖示資源做使用。

下載喜歡的圖示(SVG檔)

網站名稱：SVG Repo – Free SVG Vectors and Icons
網站網址：https://www.svgrepo.com/

如果你不是選擇自己設計，你可以下載這個網站提供的免費圖示SVG檔

找到想要的圖示後下載到桌面，這邊提醒一下，建議先將SVG檔名稱修改為好記的代碼或名稱(英文/數字/底線)。

FlutterIcon

打開FlutterIcon頁面，將剛剛下載好的SVG檔拖移進去。

在左上方Custom Icons處可以看見你剛剛上傳的圖示，選擇後按右上方的DOWNLOAD下載到桌面。

將剛剛下載下來的壓縮檔解壓縮，可以看見有三個檔案 fonts資料夾 / config.json / my_flutter_app_icons.dart

將fonts裡面的ttf檔修改為別的名字(也可以不改，但當你有很多個fonts的時候就需要修改)

在專案中使用Icon

將 fonts資料夾丟入專案內

將 my_flutter_app_icons.dart 丟入專案/lib 中

開啟專案中的pubspec.yaml 寫上

 fonts:
  - family: CustomIcons
    fonts:
      - asset: fonts/CustomIcons.ttf

開啟my_flutter_app_icons.dart 將 MyFlutterApp 改為自訂的名稱(ex:CustomIcons)，Icon的名稱也可以在下方修改。

注：剛打開的時候_kFontPkg前方可能會有一個問號造成錯誤，將它刪掉就行。

使用方法

在檔案中import my_flutter_app_icons.dart

Icon(
CustomIcons.圖示名稱,
color: Colors.blue,
size: 32.0,
)

如此一來，就能使用自己想要的圖示啦！

• About
• Latest Posts

pluto

懶癌末期患者，正以經營博客治癒。

Latest posts by pluto (see all)

• 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
• [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日
• [楓之谷私服] 簡單的飛天椅子(坐騎)改法 v120 - 2022 年 6 月 19 日

相關文章:

2022免費前端初學者學習資源(網站、電子書、趨勢追蹤、工具資源、面試題目…等) React 那些好看、有趣、實用的功能庫、組件庫推薦 Flutter HTTP POST請求提交表單資料 楓之谷私服架設圖文教學及問題彙總(v120及以下版本適用) 優化 WordPress 效能最佳神器－WP Rocket 詳細介紹及使用方法