Padronização de ícones em projeto React

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 ícones, 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.