montar um sprite
☞ roda inteiramente no seu navegador — nada é enviadoSolte seus ícones SVG aqui
ou clique para escolher — até 40 arquivos SVG
Prévia
Cole isto onde os ícones devem aparecer
OneImageTool
Ferramentas de Imagem Grátis
montar um sprite
Solte seus ícones e receba um único arquivo sprite de elementos symbol, mais a linha use de cada ícone, pronta para colar.
ou clique para escolher — até 40 arquivos SVG
Prévia
um arquivo, uma referência por ícone
Cada ícone carregado como arquivo próprio é uma requisição própria, uma entrada de cache própria e uma chance própria de chegar um quadro atrasado. Um sprite dobra todos em um só documento: cada ícone vira um symbol com seu próprio viewBox, nada desenha sozinho, e você puxa um deles onde precisar com use href="#icon-name". Como a referência é por id e não por URL, o ícone herda currentColor e o CSS aplicado ao svg que o envolve — justamente o que uma pilha de tags img não consegue fazer.
O difícil não é embrulhar, são os nomes. Quarenta ícones exportados de uma ferramenta de design trazem alegremente quarenta gradientes chamados "a" e quarenta classes chamadas "cls-1", e assim que dividem um documento o segundo toma em silêncio a pintura do primeiro. Por isso cada id e cada classe dentro de um ícone é renomeada com o id do próprio símbolo como prefixo, e os quatro esconderijos de uma referência — url() em um atributo, um href apontando para um fragmento, o atributo style e o CSS dentro de um elemento style — são reescritos junto. Nada vaza entre ícones.
três passos
Até 40 arquivos SVG de uma vez, analisados no seu navegador. Reordene uma linha com as setas; essa ordem é a ordem dos símbolos no arquivo.
Cada símbolo recebe o nome do arquivo com o prefixo na frente, e a lista mostra o resultado. Dois arquivos com o mesmo nome ganham um número, para que dois símbolos não reivindiquem o mesmo id.
O sprite vai para dentro da sua página ou é servido como sprite.svg; o trecho dá uma linha pronta para colar por ícone.
respostas rápidas
De dois jeitos. Cole o sprite inteiro perto do topo do seu HTML e referencie um ícone com use href="#icon-name"; ou sirva o arquivo e referencie use href="/sprite.svg#icon-name". O primeiro poupa uma requisição, o segundo deixa o navegador cachear um sprite só para todas as páginas.
Do nome do arquivo, em minúsculas, com tudo que não for letra ou dígito virando hífen e o prefixo na frente. Assim arrow_left.svg com o prefixo padrão vira icon-arrow-left.
Um id de XML não pode começar com dígito, e nomes como 2-arrow.svg são comuns. O prefixo também evita choque com ids que já existem na sua página. Você pode mudá-lo ou limpá-lo; se limpar deixasse um id inválido, um prefixo reserva é recolocado.
O segundo recebe um número. Sem isso, os dois símbolos teriam o mesmo id e toda referência a ele mostraria o primeiro ícone — uma imagem errada em silêncio, não um erro.
Sim. Cada id e classe dentro de um ícone é renomeada com o id do seu símbolo como prefixo, e as referências são reescritas junto: url() em atributos, hrefs de fragmento, o atributo style e o CSS dentro de um elemento style.
Se o ícone usa fill="currentColor", dá: defina color no svg que contém a referência e o ícone acompanha. Ícones com preenchimento fixo mantêm o que têm; o sprite não reescreve suas cores.
Até 40 por vez. Um sprite não tem limite real próprio, mas uma folha bem maior costuma render mais dividida por seção do site, para que cada página carregue só os ícones que realmente usa.
Não. Os SVGs são analisados e montados dentro do seu navegador, e a prévia é uma URL de blob da sua própria máquina. Esta ferramenta não tem servidor algum para receber um arquivo.
Sim — gratuito, sem marca d’água e sem cadastro.