Versão em Português:

Como eu migrei o modo de gerar as fontes de ícones no meu app Flutter e o porquê

Rodrigo Castro ・ Nov 1 '23

#flutter #icons #tutorial #dart

In the project I'm currently working on, we use a font just for icons. One way we found to generate these fonts was to submit all the SVGs to https://www.fluttericon.com/.

The process basically involved:
1) Getting the SVG from the designer
2) Updating the site with the latest config.json
3) Inserting the new icon
4) Downloading the updated icon font
5) Copy and replace the new files (font, config.json and icons.dart) into the project, which sometimes required adjusting some things manually.

What are the problems with this approach?

Our team currently consists of 5 Flutter developers and sometimes developers would create PRs where they both added icons and of course there were conflicts when it came to resolving these merges. The first developer to submit their changes would do fine, while the next person would have to deal with the conflicts manually, sometimes it was better to redo the whole process mentioned above, to resolve the conflicts more easily. I think this problem happened to me a few times and so I tried to find a more efficient way of doing this process.

Which approaches should I take?

Searching for alternatives to improve this process, making it easier to generate the icons by thinking about automating most of the process, I found this lib dart https://pub.dev/packages/icon_font_generator that "under the hood" uses nodeJS to generate the icons, and I realized that the result was exactly what we were expecting, but it would solve everything in a command line to generate, without the need to open the Flutter Icon site. All we would need to input was the folder with all the SVGs to be able to generate our font locally.

There was just one small problem...

Where are my SVGs?

Right at the start I ran into a very big problem. The SVG icons are used to generate the font and configuration files, but there's no way to download the SVGs back from fluttericon.com.

That's when I came across an excellent article by a developer called Sara, on how to retrieve SVG files from font-generating sites. It wasn't exactly about fluttericon.com, but it was something that caught my eye.

Link to her article:
https://www.sarasoueidan.com/blog/icon-fonts-to-svg/

Reading more about the article I realized that Flutter Icon is a fork of Fontello, one of the sites mentioned by Sara in the article.

Briefly, following the article:
1) upload the FlutterIcon config.json file in Fontello
2) download the fonts from Fontello
3) Import the Fontello fonts into Icomoon.app
4) Select all the icons and download them in SVG format

This way I got the SVGs back, whew!

Putting the Icon Font Generator package to work

First I installed IconFontGenerator as global

dart pub get activate icon_font_generator

Next, I downloaded NodeJS via brew (MacOS):

brew install node

Just to be sure, I checked to see if it was pointing correctly (what was expected was something like /opt/homebrew/bin/node).

which node

Result:

$ /opt/homebrew/opt/node@18/bin/node

Perfect, the last step is to run the icon_font_generator:

icon_font_generator --from=./assets/icons/svg --class-name=MyProjectIcons --out-font=./assets/icons/MyProjectIcons.ttf --out-flutter=./assets/icons/MyProject_icons.dart --naming-strategy=camel

Everything worked, and now our icon font generation process is much simpler and faster.

I hope this has helped you

Until next time,