SVG Symbol

Uma alternativa às fontes de ícone baseadas em fonte — usando sprites SVG symbol para incorporar ícones escaláveis e multicoloridos diretamente no HTML.

O que são Sprites SVG Symbol?

Os sprites SVG symbol agrupam múltiplos ícones SVG em um único arquivo. Cada ícone é definido dentro de um elemento <symbol> com um id único. Para usar um ícone, você o referencia com <use href="#icon-id">. O sprite é carregado uma vez — seja inline ou como arquivo externo — e os ícones individuais são renderizados em qualquer lugar da página.

Esta é uma abordagem fundamentalmente diferente das fontes de ícone. Em vez de mapear pontos de código Unicode para glifos de fonte, você usa elementos SVG nativos. Cada ícone retém seus recursos SVG completos: múltiplas cores, gradientes, filtros e atributos de acessibilidade refinados. A compensação é uma marcação e convenções de estilo ligeiramente mais complexas em comparação com a abordagem CSS pura das fontes de ícone.

Como Funciona

Um arquivo de sprite é um documento SVG regular contendo um ou mais elementos <symbol>. Cada symbol define um ícone autocontido com seu próprio viewBox:

icons.svg (o arquivo de sprite)

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

O <svg> externo está oculto com style="display:none" para não ocupar espaço na página. Os symbols internos são invisíveis até serem referenciados. Para renderizar um ícone, use o elemento <use>:

Usando symbols no HTML

<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Estilize os ícones com CSS, usando fill e stroke em vez da propriedade color baseada em fonte:

CSS para ícones SVG

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

Usar fill: currentColor permite que o ícone herde a cor do texto do elemento pai, de forma semelhante a como as fontes de ícone funcionam com a propriedade color.

Symbol vs Fontes de Ícone

Vantagens dos Symbols

Suporte a múltiplas cores — cada caminho pode ter seu próprio fill e stroke
Cada ícone é um elemento SVG real com melhor acessibilidade
Sem necessidade de mapeamento Unicode — referência a ícones por nomes legíveis
Renderização mais nítida — sem problemas de hinting de fonte ou artefatos de subpixel
Partes individuais do ícone podem ser animadas de forma independente
Funciona com qualquer recurso SVG: gradientes, filtros, clip-paths, máscaras

Desvantagens dos Symbols

Marcação mais verbosa (<svg><use> vs <i class="icon">)
Não é possível estilizar facilmente com CSS color — necessário fill/stroke
Sprites externos têm implicações CORS para carregamento entre origens
Tamanho total de arquivo maior do que formatos de fonte comprimidos
Mais peso HTML por uso de ícone
Sem suporte a pseudo-elementos ::before/::after

Estratégias de Carregamento

Há três maneiras principais de carregar um sprite SVG symbol em uma página, cada uma com diferentes compensações:

Sprite inline

Cole todo o SVG do sprite diretamente no <body> do HTML. Esta é a abordagem mais simples — sem problemas de CORS, sem requisição HTTP extra. Os symbols ficam imediatamente disponíveis para qualquer referência <use> na página. Funciona melhor para aplicações de página única ou quando você tem um conjunto de ícones pequeno (menos de ~50 ícones).

Sprite externo

Carregue o sprite como um arquivo externo via <use href="icons.svg#home">. Isso mantém seu HTML limpo e permite que o navegador armazene o sprite em cache separadamente da página. No entanto, tem implicações CORS: o sprite deve ser servido da mesma origem, ou o servidor deve definir cabeçalhos Access-Control-Allow-Origin adequados. Observe que o Internet Explorer não suporta referências <use> externas — use o polyfill svg4everybody se precisar de suporte ao IE.

Injeção JS

Carregue o arquivo de sprite via fetch() e injete-o no DOM em tempo de execução. Isso combina a capacidade de cache dos sprites externos com a confiabilidade dos sprites inline — o SVG injetado torna-se parte do documento, portanto as referências <use> funcionam sem restrições CORS. O Bobcorn gera essa abordagem: um arquivo JS que busca e registra todos os symbols quando carregado.

Abordagem de injeção JS (saída do Bobcorn)

<!-- Carregue o sprite JS gerado -->
<script src="icons-symbol.js"></script>

<!-- Em seguida, use normalmente: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

O arquivo JS cria um elemento <svg> oculto contendo todas as definições de <symbol> e o adiciona ao corpo do documento. Uma vez carregado, os ícones são referenciados de forma idêntica à abordagem inline.

Quando Usar SVG Symbols

Os sprites SVG symbol são a escolha certa quando seu projeto precisa de recursos que as fontes de ícone não podem fornecer:

Ícones multicoloridos — quando os ícones usam mais de uma cor, gradientes ou preenchimentos complexos que um glifo de fonte único não consegue representar
A acessibilidade é prioridade máxima — cada ícone pode incluir um elemento <title> e atributo aria-label, dando aos leitores de tela descrições significativas
Partes de ícone animadas — você precisa animar caminhos ou grupos individuais dentro de um ícone (por exemplo, uma engrenagem girando dentro de um ícone de configurações)
Projetos com uso intensivo de SVG — sua aplicação já usa SVG inline extensivamente, portanto os symbols se encaixam naturalmente na arquitetura existente
Nitidez de renderização máxima — o hinting de fonte pode causar problemas de alinhamento em tamanhos pequenos; os SVG symbols renderizam perfeitamente em pixels em qualquer dimensão

Quando Manter Fontes de Ícone

As fontes de ícone continuam sendo a melhor escolha em vários cenários comuns:

Grandes conjuntos de ícones (200+) — um arquivo de fonte WOFF2 comprimido é significativamente menor do que um sprite SVG com o mesmo número de ícones
Todos os ícones monocromáticos — se todo ícone for uma única cor, as fontes de ícone oferecem a integração mais simples sem compensações
Integração apenas com CSS — as fontes de ícone requerem apenas um link de folha de estilos e classes CSS, sem JavaScript ou marcação extra
Sistemas legados — projetos que já usam fontes de ícone não ganham o suficiente ao mudar para justificar o esforço de migração
Suporte a pseudo-elementos — você precisa de ícones em pseudo-elementos ::before ou ::after, que só funcionam com glifos de fonte

No Bobcorn

O Bobcorn pode exportar seus ícones como um arquivo de sprite symbol JS junto com os arquivos de fonte. Ative a opção JS no diálogo de exportação. O arquivo gerado cria um sprite SVG inline e registra todos os symbols quando carregado. Você pode usar ambas as abordagens no mesmo projeto — fontes para ícones de UI simples, symbols para ilustrações coloridas complexas.

Dica

Você não precisa escolher apenas um. Muitos sistemas de design usam fontes de ícone para a maioria de seus ícones de UI monocromáticos (botões, navegação, elementos de formulário) e SVG symbols para algumas ilustrações multicoloridas ou ícones animados. O diálogo de exportação do Bobcorn permite gerar ambos em uma única exportação.