Flutter 中使用svg资源

svg作为一种矢量图，在屏幕适配方面具有很大优势，且不需放多套资源，能在一定程度减小包的体积大小。但是想在Flutter中直接使用svg资源，却并不是非常方便，这里介绍一种简洁的方式来使用svg矢量图，前提是需要转换，转换并不保证完全等同原图，请自行验证。

在线转换

首先准备好几张svg资源
在这里插入图片描述
将资源拖拽上传到 http://fluttericon.com/网站

上传完成后，点击【DOWNLOAD】下载

导入并配置

将下载的压缩包解压，获得fonts文件夹和一个dart文件，其中两个默认文件为MyFlutterApp.ttf和my_flutter_app_icons.dart

将fonts文件夹复制到工程根目录下，注意，与lib文件夹在同一级
将my_flutter_app_icons.dart文件复制到lib文件夹下，或者是lib下的其他目录，依据自己的代码目录结构来

查看my_flutter_app_icons.dart文件，依据其中的注释说明，配置工程的pubspec.yaml文件

flutter:
  fonts:
  - family:  MyIcons
    fonts:
      - asset: fonts/MyFlutterApp.ttf

修改my_flutter_app_icons.dart文件中的类名，可根据自己的习惯修改，我这里将MyFlutterApp修改为MyIcons，注意将构造方法等等统一重命名为MyIcons

class MyIcons {
  MyIcons._();

  static const _kFontFam = 'MyIcons';

  static const IconData smile = const IconData(0xe801, fontFamily: _kFontFam);
  static const IconData meh = const IconData(0xe802, fontFamily: _kFontFam);
  static const IconData frown = const IconData(0xe803, fontFamily: _kFontFam);
}

依据自身习惯，可将my_flutter_app_icons.dart文件重命名为my_icons.dart，这样导包语句可以变短

代码中使用

使用方式同Icons中的常量，首先导入my_icons.dart

Container(child: Center(child: Icon(MyIcons.smile)));

在这里插入图片描述

欢迎关注我的公众号：编程之路从0到1

在这里插入图片描述