Ícones SVG: marcação inline, sprite com use ou elemento img

O que é

São três formas de colocar um ícone SVG. Inline: a marcação <svg> fica no próprio HTML, de modo que fill="currentColor" acompanha a cor do texto e o CSS alcança todos os caminhos (paths). Sprite: um único arquivo define cada ícone como <symbol id="check">…</symbol>, e cada ocorrência é escrita como <svg><use href="/icons.svg#check"></use></svg>; o arquivo é buscado uma só vez e guardado em cache, e o clone herda color do contexto em que está. Imagem: <img src="icon.svg"> ou um fundo CSS é a opção mais simples e também é cacheável, mas o SVG passa a ser uma imagem opaca, cujo interior o CSS não consegue estilizar.

Por que importa

Os ícones são numerosos, aparecem repetidamente e recebem a cor do contexto. A marcação inline dá controle total, mas repete bytes em cada página e em cada linha de tabela; o sprite oferece cache e uma definição única, porém com regras de carregamento mais restritas; a imagem oferece cache, mas nenhuma possibilidade de estilização. A escolha determina se os ícones acompanham a cor do texto, os estados de hover e o modo escuro sem precisar de arquivos adicionais.

Como aplicar

• Use por padrão um sprite de mesma origem com <use href>. A MDN observa que os navegadores podem aplicar a política de mesma origem (same-origin policy) ao <use> e recusar URLs de outras origens; por isso, sirva o sprite a partir da origem da página ou inclua o bloco de <symbol> uma única vez, no topo do documento.
• Coloque fill="currentColor" (e stroke, quando for o caso) nos símbolos; a MDN define currentColor como o valor da propriedade color do elemento, então definir color no botão ou no link estiliza o ícone.
• Marque os ícones decorativos com aria-hidden="true" e focusable="false". Dê um nome ao ícone que aparece sozinho: um elemento <title> dentro do SVG (o elemento de nome acessível, geralmente exibido também como tooltip) ou um aria-label no botão que o envolve.
• Defina width e height (como atributos ou em CSS) em todos os ícones, para que o layout não se desloque antes de o sprite chegar.
• Coloque inline os dois ou três ícones necessários para a primeira renderização (logotipo, menu) e deixe os demais no sprite; versione a URL do sprite como qualquer outro asset.
• Passe os ícones por um otimizador e normalize o viewBox, para que todos compartilhem o mesmo sistema de coordenadas.

Armadilhas

As classes da página não alcançam o conteúdo clonado pelo <use>; só atravessam propriedades herdáveis e propriedades customizadas (custom properties). Por isso, ícones com várias cores exigem currentColor combinado com custom properties, e não seletores de classe. O clone não está no DOM acessível a scripts. Um sprite que muda os nomes dos ids quebra todas as páginas que ainda referenciam os antigos, até que os caches expirem. As fontes de ícones (icon fonts), a alternativa mais antiga, não são comparadas aqui.