Skip to main content

Padronização de ícones em projeto React

· 2 min read
Bruno Carneiro
Bruno Carneiro
Fundador da @TautornTech

Uma coisa bem simples, mas que pode virar um grande problema para projetos Web é a organização de ícones.

É extremamente comum o uso de bibliotecas como HugeIcons, Lucide, Material Icons, Font Awesome, React Icons e muitas outras e bem natural que o time/pessoa responsável pelo design crie os próprios icons, de acordo com a necessidade do projeto e da equipe.

Essa escala e mistura de ícones pode acarretar despadronização do projeto, muitas bibliotecas exportam ícones parecidos e com uma infinidade de características.

Uma forma que gosto de fazer para evitar este problema é padronizar os ícones em um único arquivo, exportando somente os possíveis no projeto.

Isso evita que ícones fora do comum para o projeto sejam utilizados.

✅ Prós dessa abordagem​

  • Padronização de ícones.

  • Tipagem com todos os ícones possíveis já exportados, facilitando o uso.

  • Organização dos arquivos: não é necessário lembrar de qual biblioteca vem o ícone, basta chamar o getIcon.

  • Facilita a escalabilidade do getIcon e da estrutura de ícones no projeto.

  • Fácil de entender.

  • Traz facilidade para testes e mocks.

  • Torna simples a inclusão de novas bibliotecas/ícones ou até mesmo sua substituição.

⚠️ Contras​

  • Exige mais trabalho inicial: é necessário exportar manualmente todos os ícones em uso.

  • Toda vez que um novo ícone for adicionado, ele precisa ser incluído no arquivo central.

  • Não oferece suporte a importações dinâmicas ou lazy loading.

  • Pode gerar erro silencioso caso um ícone solicitado não exista.

Estrutura do componente​

Uso​

Conclusão​

Essa abordagem que utilizei precisa ser evoluída para atender projetos maiores, mas para um start inicial e constante padronização e evolução do projeto ajuda bastante, podendo ser o centro da organização dos ícones.