技術標籤：flutterflutter

1.在專案檔案pubspec.yml中加入flutter外掛 flutter_svg

flutter_svg: ^0.19.1

2.執行flutter外掛安裝操作

flutter packages get

3.安裝全域性外掛（基於nodeJs）

npm install flutter-iconfont-cli -g

4.生成配置檔案

npx iconfont-init

5.此時專案根目錄會生成一個iconfont.json的檔案

說明：
symbol_url ： 直接複製iconfont官網提供的專案連結，在連結前面加上http:即可。
save_dir ： 根據iconfont圖示生成的元件存放的位置。每次生成元件之前，該資料夾都會被清空。

6.開始生成React標準組件

npx iconfont-flutter

7.使用

（1）圖示尺寸
根據配置default_icon_size，每個圖示都會有一個預設的尺寸，可以隨時覆蓋。

IconFont(IconNames.alipay, size: 100)
 

（2）圖示單色
單色圖示，如果不指定顏色值，圖示將渲染原本的顏色。如果你想設定為其他的顏色，那麼設定一個想要的顏色即可。
注意：如果你在props傳入的color是字串而不是陣列，那麼即使原本是多色彩的圖示，也會變成單色圖示。

IconFont(IconNames.alipay, color: 'red');

（3）圖示多色彩
多色彩的圖示，如果不指定顏色值，圖示將渲染原本的多色彩。如果你想設定為其他的顏色，那麼設定一組想要的顏色即可。

IconFont(IconNames.alipay, colors: ['green', 'orange']);

（4）更新圖示
當圖示有變更時，只需要更改配置symbol_url後，執行npx iconfont-flutter即可。

npx iconfont-flutter

本文轉自：
https://blog.csdn.net/weixin_44018385/article/details/107403689