Olá, caro amigo leitor.

Já se deparou com aquela situação em que precisava de ícones específicos para um projeto, mas não encontrava nada que se encaixasse nas bibliotecas populares como FontAwesome? Pois é, eu também. Hoje vou compartilhar uma experiência recente que tive enquanto trabalhava em um projeto de desenvolvimento web para a Nishiki Sake, uma loja especializada em sakes.

Esse projeto, no qual atuei como frontend, utilizava o queridinho do momento, React JS. Apesar de parecer simples, ele se revelou uma verdadeira montanha-russa de desafios.

A Nishiki Sake é um cliente antigo da Marrs Studio, e fomos incumbidos de reconstruir seu e-commerce do zero, criando uma nova interface tanto para o front quanto para o backoffice.

No início, tudo parecia tranquilo. Estávamos bem preparados, com todas as lições de projetos anteriores em mente. Mas, como a vida adora pregar peças, surgiram obstáculos de todos os tipos: problemas pessoais, dificuldades técnicas com a integração com uma empresa de pagamento, e tudo que poderia dar errado, deu. Quando finalmente começamos a apagar os incêndios, uma nova bomba explodiu: o designer encarregado de criar os ícones desistiu do projeto no último minuto, sem entregar nada.

Foi então que pensei:

“Se isso demorar mais, a zica nunca vai nos deixar? Eu faço os ícones!”

E assim foi. Após um briefing com o cliente para alinhar as especificações visuais, comecei a desenhar os ícones com o padrão de design que se encaixasse perfeitamente na interface da loja.

Com os vetores finalizados, chegou a hora de exportar os ícones em SVG e testá-los na interface.

Mas aí veio a pergunta:

Qual seria a melhor forma de implementar esses ícones no projeto?

A ideia inicial foi usar a tag <img>, mas, pensando um pouco mais, decidi tentar algo diferente. Por que não implementar esses ícones como fonts, à la FontAwesome ou Google Fonts?

Então, mãos à obra! Criei os arquivos necessários e montei um CSS para que os ícones fossem chamados como classes, como:

 <i class="icone icone-arroz"></i> 

E adivinha? Funcionou perfeitamente! Mas, como a vida gosta de rir de nós, depois de horas desenvolvendo essa solução, descobri que existe um site que faz isso por você em poucos segundos: IcoMoon.

Se você também precisa criar ícones e usá-los como fonts em seu projeto, recomendo essa ferramenta. Basta importar seus SVGs e, em dois cliques, você gera todos os arquivos necessários para utilizar seus ícones como fonts. E aí, pode me agradecer depois!

Ah, caso você queira saber um pouco mais sobre o projeto da Nishiki Sake você pode conferir mais detalhes através do site da Marrs Studio clicando aqui

Até a próxima!