Flutter用图片自制SVG图标
Flutter 本身提供了很多图标，也有一些不错的第三方库。
如：pub.dev/packages/fo…
如果想把图片转换为图标的话，需要一些转换处理。
这里介绍一下如何用图片自制 SVG 图标。
用图片自制 SVG 图标主要步骤：
把图片转换成 SVG 文件。
在 www.fluttericon.com 中把 SVG 文件转换成 ttf 字体文件。
转换完下载的 zip 里包含 ttf 文件和相关的 dart 代码文件。在 Flutter 工程中添加使用。
本文相关代码：helloflutter/helloicon at main · bettersun/helloflutter · GitHub
图片转换成 SVG 文件。
网上有很多图片转 SVG 的网站，很多编辑工具也支持转换。
这里使用的是 Convertio 。Convertio
这里使用 PNG 转 SVG。
要转换的图片：
转换后的 SVG 文件：
Panda 喜欢的黑白单色。
转换后把 SVG 文件保存到本地。
把 SVG 文件转换成 ttf 字体文件。
www.fluttericon.com/
该网站转换后，下载的 zip 里包含 ttf 文件和相关的 dart 代码文件。具体方法：
将前面保存到本地的 SVG 文件拖拽到该网站的拖拽指示的框里。
在显示 MyFlutterApp 的文本框里填上一个有效的 dart 类名。
这里输入的是 Panda 。
选中自定义的图标后，DOWNLOAD 按钮的数字会变成 1，即选中的图标个数。
点 Download 下载。
添加到 Flutter 工程。
下载后有三个文件:
config.json 像是 SVG 转换成的 json，在本示例中并不使用。
Panda.ttf 是 SVG 的字体文件，放到 Flutter 工程的静态文件目录中。
这里放到了工程下的 fonts 目录下。{project}/fonts/Panda.ttf 复制代码然后在
pubspec.yaml里添加字体文件，设置如下：fonts: - family: Panda fonts: - asset: fonts/Panda.ttf 复制代码
参照 panda_icons.dart 文件的内容创建图标的 dart 代码文件。
app_icons.dart：
import 'package:flutter/widgets.dart'; class AppIcons { static const _kFontFam = 'Panda'; static const String? _kFontPkg = null; static const IconData panda = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg); } 复制代码在其它代码中，使用该 IconData 即可。
import 'app_icons.dart'; 复制代码
Icon(AppIcons.panda, size: 28, color: Colors.blueAccent) 复制代码
panda_icons.dart
fonts/Panda.ttf
config.json
示例最终效果：
Android 11.0 (虚拟机):
iPhoneX (虚拟机):
制作属于你的专用图标吧。
作者：bettersun
链接：https://juejin.cn/post/7032429660528967710