Fiz um componente de ícone (ou imagem) a partir de um SVG.

Primeiro escolhi uma imagem qualquer na internet, uma xícara por exemplo. Depois vetorizei, para criar um componente SVG no React.

Para criar um componente React de uma imagem, você pode usar o import e chamar SVG direto e deixar na pasta assets, por exemplo. Porém dessa forma, a importação é feita na cor e no tamanho original. Claro, pode mudar a cor, porém vai alterar a cor do objeto inteiro.

Outra forma é utilizar biblioteca de ícones, como Lucide-react ou a fonte Awesome por exemplo.

Porém no caso de uma aplicação que você queira deixar o design mais customizado e um visual mais atrativo, pode desenhar seus próprios ícones, tornando o visual mais profissional.

Para treinar, eu vetorizei uma xícara de café, me baseei em uma imagem aleatória que escolhi na internet. Em seguida exportei o vetor em SVG para criar um componente React.

Com o componente criado, eu consigo mudar a cor de cada parte do desenho. Também é possível fazer uma animação separada para cada parte do desenho, deixando o objeto menos engessado.

O designer pode criar uma biblioteca de ícones customizadas para a aplicação, toda em SVG e deixar parametrizável cada detalhe do ícone.

Eu fiz um vídeo mostrando o passo a passo de como fiz isso.

E aí, o que achou do resultado? Conta aí 👇🏼