Sprite SVG de símbolos
Digite os nomes home, search e user e receba um único sprite SVG oculto com um símbolo para cada um, além do trecho use de cada ícone para colar onde ele aparece. Listas vazias, duplicados e nomes inválidos são recusados. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Ids
- home, search, user
- Quantidade
- 3
- viewBox
- 0 0 24 24
- Prefixo de ID
- IDs dos símbolos
- home, search, user
Sprites SVG de símbolos mantêm sistemas de ícones compactos, cacheáveis e acessíveis: um documento oculto guarda símbolos reutilizáveis, e cada botão ou item de navegação aponta para eles com um elemento use curto. Designers e engenheiros front-end ainda perdem tempo escrevendo o invólucro à mão, renomeando ids e sincronizando os pontos de uso quando um ícone novo entra no conjunto. Esta capacidade aceita uma lista não vazia de identificadores de ícone, viewBox e prefixo de id opcionais, e devolve a marcação do sprite de forma determinística mais um trecho use para cada id de símbolo final.
O que é um sprite SVG de símbolos e por que listas de ids importam
Um sprite clássico de ícones SVG é um único elemento svg raiz, costuma ficar oculto com display none e marcado aria-hidden para que a tecnologia assistiva ignore o bloco de definições. Dentro dele, cada ícone é um elemento symbol cujo id é o nome estável que o seu produto usa em todo lugar: home, search, cart, user-settings.
Paths e geometria vivem como filhos desses símbolos; esta ferramenta emite as cascas vazias de symbol com um viewBox compartilhado para que o pipeline de assets ou a exportação do designer injetem a geometria depois sem reescrever cada consumidor. Nos pontos de chamada você referencia um símbolo com use e um fragmento href que coincide com o id do símbolo, tipicamente envolvido num svg pequeno para tamanho e estilo currentColor.
Manter esse vocabulário de ids como uma única lista—não como marcação copiada—evita deriva entre exportações Figma, componentes React, rodapés de e-mail e páginas de marketing estáticas.
Contrato de entrada, formato da resposta e regras de validação
Cada entrada é aparada; vazios são rejeitados. Todo id deve corresponder a um token de nome SVG e XML prático: letra ou sublinhado no início, depois letras, dígitos, sublinhado, ponto, dois-pontos ou hífen. Essa regra bloqueia espaços e caracteres que quebram atributos ou referências de fragmento.
Valores de atributo são escapados para amp, aspas e colchetes angulares para tokens estranhos mas legais permanecerem seguros na marcação. Validação falha não é cobrada.
Casos de uso
Biblioteca de componentes e docs do Storybook
Mantenha knobs do Storybook e exemplos do README alinhados com ids de símbolo reais para desenvolvedores nunca referenciar um fragmento ausente.
Shortcodes de CMS e páginas de marketing
Dê aos autores de conteúdo marcação use pronta para colar em ícones de navegação e rodapé sem editar definições SVG à mão.
Perguntas frequentes
O que o gerador de sprite SVG de símbolos devolve?
Você adiciona a geometria de path dentro dos símbolos no pipeline de assets.
O que acontece se a lista de ids estiver vazia?
Um catálogo vazio não é uma publicação de sprite válida; corrija a lista e tente de novo. Validação falha não é cobrada.
Como adiciono um prefixo como icon- a todos os símbolos?
Informe o prefixo uma vez e ele é colocado na frente de cada nome, então home vira icon-home. Assim seus ícones não colidem com um símbolo de mesmo nome vindo de outra biblioteca na mesma página.
Quais caracteres posso usar no nome de um ícone?
O nome deve começar com uma letra ou um sublinhado, seguido de letras, dígitos, sublinhados, pontos, dois-pontos ou hífens. Espaços e outros sinais são recusados porque quebrariam a marcação ou a referência do use ao símbolo.
O que acontece se dois ícones ficarem com o mesmo nome?
O sprite não é gerado e você recebe uma mensagem clara, mesmo quando a repetição só surge depois de aplicar o prefixo. Corrigir a lista é mais seguro do que deixar um símbolo substituir outro em silêncio no navegador.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/web/svg-symbol-sprite-build \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"ids":["home","search","user"]}'const res = await fetch("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"ids": [
"home",
"search",
"user"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-symbol-sprite-build",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"ids": [
"home",
"search",
"user"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"ids":["home","search","user"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"ids":["home","search","user"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-symbol-sprite-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"ids": [
"home",
"search",
"user"
]
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_symbol_sprite_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Listas vazias falham com invalid_input para que os pipelines nunca publiquem um sprite oco.
O que é um sprite SVG de símbolos e por que listas de ids importam
Quando a lista está vazia não há nada a publicar: este endpoint rejeita arrays de ids vazios em vez de devolver um sprite com zero símbolos, o que passaria um build descuidado e enviaria UI quebrada. O id_prefix opcional (por exemplo icon-) permite monorepos darem namespace aos símbolos para que widgets de terceiros não colidam com o seu próprio id home. O view_box opcional usa por padrão o canvas comum 0 0 24 24 de conjuntos estilo Material, mas você pode passar qualquer viewBox de quatro números para artboards de 16 pixels ou personalizados ficarem consistentes em todo o sprite.
Contrato de entrada, formato da resposta e regras de validação
Envie por POST um corpo JSON com ids, um array não vazio obrigatório de strings (os aliases icon_ids e icons são aceitos). Ids de símbolo finais duplicados—após aplicar o id_prefix opcional—falham com uma mensagem invalid_input clara para você corrigir o catálogo em vez de sobrescrever símbolos no navegador. view_box é opcional e o padrão é 0 0 24 24; quando fornecido deve ser quatro números separados por espaço com largura e altura positivas. id_prefix é opcional e vazio por padrão; quando definido deve ser um token de nome válido para o id de símbolo concatenado permanecer legal. No sucesso o corpo inclui count, o view_box e id_prefix normalizados, symbol_ids na ordem de entrada, sprite_markup como um svg oculto multilinha com um symbol vazio por id, use_snippets como objetos com campos id e snippet prontos para colar, e use_list_markup unindo esses trechos com quebras de linha para demos rápidas. Chamadas bem-sucedidas usam saldo KIT pré-pago no preço base publicado US$ 0,002 porque é trabalho de parse puro, sem tokens de modelo e sem rede de saída.
Onde a geração de sprite e use realmente vale a pena
Equipes de design system geram a casca do sprite sempre que um arquivo de tokens de ícones muda e abrem um PR que só adiciona filhos path dentro dos símbolos existentes. Sites de marketing e temas CMS colam trechos use em rich text ou bibliotecas de shortcodes sem ensinar aos autores a sintaxe SVG completa. Mantenha listas de ids no controle de versão, rejeite publicações vazias, e você obtém uma única fonte de verdade para sprites SVG de símbolos sem levantar um CDN de ícones só pela marcação da casca. Bibliotecas de componentes enviam controles Storybook que listam ids de símbolo da mesma resposta da API para a documentação nunca inventar um id que o sprite não define. Revisões de acessibilidade verificam que o bloco de definições é aria-hidden e que uses decorativos levam aria-hidden e focusable false como este endpoint emite por padrão—os autores ainda adicionam aria-label ou title quando um ícone é o único nome visível de um controle. Produtos multi-marca mapeiam prefixos de marca via id_prefix para um único pipeline emitir brand-a-home e brand-b-home sem bifurcar handlers. Workers de borda e geradores estáticos podem chamar a mesma forma de módulo no caminho gratuito do navegador para pré-visualizações e no caminho da API para reconstruções em massa após um dump de design.
Casos de integração
Exportações de design tokens e catálogo de ícones
Transforme uma lista JSON de nomes de ícones numa casca de sprite SVG oculta e trechos use correspondentes sempre que o catálogo mudar no CI.
Perguntas técnicas
Posso dar namespace aos ids com um prefixo?
Sim. Defina id_prefix (por exemplo icon-) para que home vire icon-home. Duplicados após o prefixo são rejeitados.
Como defino o viewBox de cada símbolo?
Passe view_box como quatro números, como 0 0 24 24 (o padrão) ou 0 0 16 16. Largura e altura devem ser positivas.
Quanto custa gerar um sprite SVG de símbolos?
A ferramenta no navegador é gratuita. Pedidos à API usam saldo KIT pré-pago a US$ 0,002 por chamada bem-sucedida; entrada inválida não é cobrada.