Photo by Harpal Singh on Unsplash

Usando sprite de ícones em SVG

Tenho notado, cada vez mais, vantagens em usar esta técnica em juntar vários ícones em uma só imagem SVG (também chamado de sprite) e tenho certeza que você pelo menos tentará usar. Neste artigo explicarei como fazer.

Hoje, basicamente, existem duas formas de usar ícones: ícones em fonts ou ícones em SVG. Trarei essa comparação mais detalhada, das vantagens de cada modelo, da performance delas, em um próximo artigo.

Acho muito importante aplicações que querem se destacar, não usarem ícones muito amplamente usados, como os do boostrap, fontawesome, entre outros. Talvez em alguns pontos da aplicação um ícone com mais detalhes trará mais impacto.

Passos para criar seu sprite SVG

Passo 1: Seleção dos ícones
Caso você mesmo não desenhe no Figma ou Illustrator, faça downloads do ícones no formato SVG em sites como Flaticon.

Exemplo de ícones baixados no Flaticon

Imagens com extensão SVG, são possíveis abrir e ler seu conteúdo em editores de texto. É aí que começa o melhor dos dois mundos (dev e design).

Código de apenas uma imagem SVG

Passo 2: Geração do sprite
Agora acesse o site https://svgsprit.es/ arrastando os ícones que foram feitos download. Neste site, ele irá converter as imagens em um arquivo SVG só, e além disso, deixará mais arrumado e otimizado!

Se desejar fazer somente a otimização de arquivos SVGs, deixando-os mais enxutos, removendo códigos desnecessários, recomendo o uso do SVGOMG: https://jakearchibald.github.io/svgomg/.

Lembrando que esse estilo é sugerido, mas esse tamanho deve ser gerenciado por você em seu CSS.

Eu gosto de salvar este código único gerado em um arquivo, por exemplo, sprite.svg dentro de uma pasta imagens.

Ao clicar em “Download Demo” após a geração dele, é possível já ver como aplicar no site.

Caso não queira fazer você mesmo este arquivo de sprite, não é difícil. Veja no passo abaixo como é a estrutura dele gerado. Basta apenas encapsular o código de cada ícone dentro de uma tag <symbol> ou <g>.

Passo 3: Geração do HTML
Um exemplo de código de como ficaria isso no site:

Note que não está exatamente igual ao código gerado pelo site. Removi o xlink devido à especificação do SVG2. Caso tenha problemas com compatibilidade no Safari, talvez seja necessário manter os dois atributos (xlink:href e href) direcionando para o mesmo caminho.

Este é o código do sprite após gerado. Note que cada ícone fica agrupado dentro do elemento <symbol> com seu ID de identificação para ser invocado no HTML.

Tá pronto! Agora você vai ver como é fácil fazer qualquer manutenção do arquivo. É só adicionar o novo código do ícone no final do arquivo e usar!

Se ficou com alguma com dúvida, veja essa demonstração em meu repositório Github: https://github.com/gilcrespo/svgsprite.

Passo 4: Acessibilidade
Compare com o código do passo 3 e veja que foram apenas poucas mudanças que deixarão cada ícone muito mais acessível em diversos leitores de tela.

Referência de conteúdo de Acessibilidade: https://www.deque.com/blog/creating-accessible-svgs/

Atualização:

Eu recomendo muito a leitura deste artigo do mestre Chris Coyier para visualizar os ícones já incluídos no sprite (durante o desenvolvimento): https://css-tricks.com/a-snippet-to-see-all-svgs-in-a-sprite/