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图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。
trim_icon_prefix ： 如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。
default_icon_size ：将为每个生成的图标组件加入默认的字体大小。
summary_component_name ：是汇总组件的名称，默认名称为IconFont。更改时必须遵守Dart中关于类名的语法规则，请尽量以大写字母开头。

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