Flutter makes its own SVG icon with images

“This is the 18th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.”

Flutter itself provides many ICONS, as well as some good third-party libraries. Such as: pub. Dev/packages/fo…

If you want to convert an image into an icon, you need to do some conversion. Here’s how to make your own SVG ICONS with images.

The main steps for creating SVG ICONS with images:

Convert images to SVG files.
Convert SVG files to TTF font files at www.fluttericon.com. The downloaded ZIP contains the TTF file and the associated DART code file.
Add use in the Flutter project.

Helloflutter /helloicon at main · bettersun/helloflutter · GitHub

Images are converted to SVG files.

There are many web sites for converting images to SVG, and many editing tools support conversion. Convertio is used here.

Convertio

PNG to SVG is used here.

Image to be converted:

Converted SVG file:

Panda likes black and white.

Save the SVG file locally after the conversion.
Convert SVG files to TTF font files.

www.fluttericon.com/ After the conversion, the downloaded ZIP contains the TTF file and the associated DART code file.

Specific methods:
1. Drag the SVG file you saved locally to the site’s drag and drop box.
2. Fill in the text box that displays MyFlutterApp with a valid Dart class name.
  
  So this is Panda.
3. After you select a customized icon, the number of the DOWNLOAD button changes to 1, that is, the number of selected ICONS.
4. Click Download.
Add to the Flutter project.

There are three files after downloading:
- panda_icons.dart
- fonts/Panda.ttf
- config.json
Config. json looks like json converted from SVG and is not used in this example.

Panda.ttf is the SVG font file placed in the static file directory of the Flutter project. This is placed in the fonts directory under the project.
```
{project}/fonts/Panda.ttf
Copy the code
```
Then add the font file to pubspec.yaml with the following Settings:
```
  fonts:
    - family: Panda
      fonts:
        - asset: fonts/Panda.ttf
Copy the code
```
Dart creates the DART code file for the ICONS using the contents of the panda_icons.dart file.

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);
}
Copy the code
```
In other code, use this IconData.
```
import 'app_icons.dart';
Copy the code
```
```
Icon(AppIcons.panda, size: 28, color: Colors.blueAccent)
Copy the code
```