English version:

How I migrated the icon font generation in my Flutter app and why

Rodrigo Castro ・ Nov 1

#flutter #icons #tutorial #dart

No projeto que atualmente trabalho a gente utiliza uma fonte só para ícones. Um jeito que achamos para gerar essas fontes foi submeter todos os SVGs para o site https://www.fluttericon.com/.

O processo basicamente envolvia:
1) Pegar o SVG com o designer
2) Atualizar o site com o config.json mais atual
3) Inserir o ícone novo
4) Baixar a fonte dos ícone atualizadas
5) Copiar e substituir os novos arquivos (fonte, config.json e icons.dart) para dentro do projeto, o que as vezes precisava ajustar alguma coisa manualmente.

Quais os problemas com essa abordagem?

O nosso time atualmente é composto por 5 desenvolvedores Flutter e as vezes os desenvolvedores criavam PRs onde ambos adicionavam ícones e é claro que aconteciam conflitos na hora de resolver esses merges. O primeiro desenvolvedor a submeter suas mudanças se dava bem, já a próxima pessoa teria que tratar os conflitos manualmente, as vezes era melhor refazer todo o processo citado acima, para resolver os conflitos de maneira mais fácil. Acho que esse problema aconteceu algumas vezes só comigo e então eu tentei procurar uma maneira mais eficiente de fazer esse processo.

Quais abordagens seguir?

Pesquisando alternativas para melhorar esse processo, deixando mais fácil para gerar os ícones pensando em automatizar a maior parte do processo eu encontrei essa lib dart https://pub.dev/packages/icon_font_generator que "por baixo do motor" utiliza nodeJS para gerar os ícones, e eu percebi que o resultado era exatamente o que estávamos esperando, mas resolveria tudo em uma linha de comando para gerar, sem a necessidade de abrir o site Flutter Icon. Tudo que precisaríamos de input era a pasta com todos os SVGs para conseguirmos gerar a nossa fonte localmente.

Só tinha um pequeno problema...

Cadê os meus SVGs?

Logo no começo me deparo com um problema bem grande. Os ícones SVG são usados para gerar a fonte e os arquivos de configuração, mas não existe um jeito de baixar os SVGs de volta no site fluttericon.com.

Foi daí então que eu encontrei um artigo excelente de uma desenvolvedora chamada Sara, sobre como recuperar os arquivos SVGs de sites geradores de fontes. Não era algo exatamente sobre o fluttericon.com, mas foi algo que me chamou a atenção.

Link do artigo dela:
https://www.sarasoueidan.com/blog/icon-fonts-to-svg/

Lendo mais sobre o artigo eu me dei conta que o Flutter Icon é um fork do Fontello, um dos sites citados pela Sara no artigo.

Resumidamente, seguindo o artigo:
1) subir o arquivo config.json do FlutterIcon no Fontello
2) baixar as fontes no Fontello
3) Importar as fontes do Fontello no Icomoon.app
4) Selecionar todos os ícones e baixar todos em formato SVG

Deste modo eu consegui os SVGs de volta, ufa!

Botando o pacote Icon Font Generator pra trabalhar

Primeiro instalei o IconFontGenerator como global

dart pub get activate icon_font_generator

Em seguida, baixei o NodeJS pelo brew (MacOS):

brew install node

Só pra ter certeza, dei um confere para ver se tava apontando corretamente (o esperado era algo parecido com /opt/homebrew/bin/node).

which node

Resultado:

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

Perfeito, ultimo passo é só rodar o icon_font_generator:

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

Deu tudo certo, agora o nosso processo de geração da fonte de ícones é muito mais simples e rápido.

Espero que isso tenha te ajudado

Até a próxima,