ForHosting KIT · Monitorar sites

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
Use pelo WebAPIE-mailTelegramApp em breve
Se você digitar
Ids
home, search, user
Você obtém
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.

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.

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.

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.

POSThttps://api.kit.forhosting.com/web/svg-symbol-sprite-build

Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.

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"]}'
{
  "ids": [
    "home",
    "search",
    "user"
  ]
}
{
  "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.

por chamadaUS$ 0,002

Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.

timeout_sec30
max_crawl_pages25
HTTPCódigoO que significa
401unauthorizedToken ausente ou inválido. Confira o header Authorization.
402insufficient_balanceSaldo insuficiente para esta tarefa. Faça uma recarga e tente de novo.
404unknown_typeEsse tipo de tarefa não existe. Confira o campo type no catálogo.
429rate_limitedMuitas requisições em pouco tempo. Espere um instante e tente de novo.

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.

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.

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.

Ver a documentação completa do KIT →