Flutter用图片自制SVG图标「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」。 F

「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」。

Flutter 本身提供了很多图标，也有一些不错的第三方库。
如：pub.dev/packages/fo…

如果想把图片转换为图标的话，需要一些转换处理。
这里介绍一下如何用图片自制 SVG 图标。

用图片自制 SVG 图标主要步骤：

把图片转换成 SVG 文件。
在 www.fluttericon.com 中把 SVG 文件转换成 ttf 字体文件。
转换完下载的 zip 里包含 ttf 文件和相关的 dart 代码文件。
在 Flutter 工程中添加使用。

图片转换成 SVG 文件。

网上有很多图片转 SVG 的网站，很多编辑工具也支持转换。
这里使用的是 Convertio 。

Convertio

这里使用 PNG 转 SVG。

要转换的图片：

转换后的 SVG 文件：

Panda 喜欢的黑白单色。

转换后把 SVG 文件保存到本地。
把 SVG 文件转换成 ttf 字体文件。

www.fluttericon.com/
该网站转换后，下载的 zip 里包含 ttf 文件和相关的 dart 代码文件。

具体方法：
1. 将前面保存到本地的 SVG 文件拖拽到该网站的拖拽指示的框里。
2. 在显示 MyFlutterApp 的文本框里填上一个有效的 dart 类名。
  这里输入的是 Panda 。
3. 选中自定义的图标后，DOWNLOAD 按钮的数字会变成 1，即选中的图标个数。
4. 点 Download 下载。
添加到 Flutter 工程。

下载后有三个文件:
- panda_icons.dart
- fonts/Panda.ttf
- config.json
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)
```

示例最终效果：

Android 11.0 (虚拟机):

iPhoneX (虚拟机):

制作属于你的专用图标吧。