Sprite SVG de symboles
Saisissez les noms home, search et user et obtenez un seul sprite SVG masqué avec un symbole pour chacun, plus l'extrait use de chaque icône à coller là où elle apparaît. Les listes vides, les doublons et les noms invalides sont refusés. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Ids
- home, search, user
- Quantité
- 3
- viewBox
- 0 0 24 24
- Préfixe d'ID
- ID des symboles
- home, search, user
Les sprites SVG de symboles gardent les systèmes d’icônes compacts, cacheables et accessibles : un document masqué détient des symboles réutilisables, et chaque bouton ou élément de navigation les vise avec un court élément use. Concepteurs et ingénieurs front-end perdent encore du temps à écrire à la main l’enveloppe, à renommer les ids et à synchroniser les points d’usage lorsqu’une nouvelle icône entre dans le jeu. Cette capacité accepte une liste non vide d’identifiants d’icônes, un viewBox et un préfixe d’id optionnels, et renvoie un balisage de sprite déterministe plus un extrait use pour chaque id de symbole final.
Qu’est-ce qu’un sprite SVG de symboles et pourquoi les listes d’ids comptent
Un sprite d’icônes SVG classique est un unique élément svg racine, généralement masqué avec display none et marqué aria-hidden pour que les technologies d’assistance ignorent le bloc de définitions. À l’intérieur, chaque icône est un élément symbol dont l’id est le nom stable que votre produit utilise partout : home, search, cart, user-settings.
Les chemins et la géométrie vivent comme enfants de ces symboles ; cet outil émet les coques symbol vides avec un viewBox partagé afin que votre pipeline d’actifs ou l’export du designer puisse injecter la géométrie plus tard sans réécrire chaque consommateur. Aux points d’appel vous référencez un symbole avec use et un fragment href qui correspond à l’id du symbole, typiquement enveloppé dans un petit svg pour le dimensionnement et le style currentColor.
Conserver ce vocabulaire d’ids comme une seule liste—pas comme un balisage copié-collé—évite la dérive entre exports Figma, composants React, pieds de page d’e-mail et pages marketing statiques.
Contrat d’entrée, forme de la réponse et règles de validation
Chaque entrée est tronquée des espaces ; les vides sont rejetés. Chaque id doit correspondre à un jeton de nom SVG et XML pratique : lettre ou souligné en premier, puis lettres, chiffres, souligné, point, deux-points ou tiret. Cette règle bloque les espaces et les caractères qui cassent les attributs ou les références de fragment.
Les valeurs d’attribut sont échappées pour amp, guillemets et chevrons afin que des jetons étranges mais légaux restent sûrs dans le balisage. L’échec de validation n’est pas facturé.
Cas d’usage
Bibliothèque de composants et docs Storybook
Alignez les knobs Storybook et les exemples README sur de vrais ids de symbole pour que les développeurs ne référencent jamais un fragment manquant.
Shortcodes CMS et pages marketing
Donnez aux auteurs de contenu un balisage use prêt à coller pour les icônes de navigation et de pied de page sans éditer à la main les définitions SVG.
Questions fréquentes
Que renvoie le générateur de sprite SVG de symboles ?
Vous ajoutez la géométrie des paths dans les symboles dans votre pipeline d’actifs.
Que se passe-t-il si la liste d’ids est vide ?
Un catalogue vide n’est pas une publication de sprite valide ; corrigez la liste et réessayez. L’échec de validation n’est pas facturé.
Comment ajouter un préfixe comme icon- à tous les symboles ?
Indiquez le préfixe une seule fois et il est placé devant chaque nom : home devient ainsi icon-home. Vos icônes n'entrent alors plus en collision avec un symbole du même nom venu d'une autre bibliothèque sur la même page.
Quels caractères un nom d'icône peut-il contenir ?
Un nom commence par une lettre ou un tiret bas, puis peut contenir des lettres, des chiffres, des tirets bas, des points, des deux-points ou des traits d'union. Les espaces et les autres signes sont refusés, car ils casseraient le balisage ou le lien entre use et le symbole.
Que se passe-t-il si deux icônes portent le même nom ?
Le sprite n'est pas créé et un message clair vous l'indique, y compris quand le doublon n'apparaît qu'après l'ajout du préfixe. Mieux vaut corriger la liste que laisser un symbole en écraser un autre sans prévenir dans le navigateur.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
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)Exemple de requête
{
"ids": [
"home",
"search",
"user"
]
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_symbol_sprite_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Les listes vides échouent avec invalid_input afin que les pipelines ne publient jamais un sprite creux.
Qu’est-ce qu’un sprite SVG de symboles et pourquoi les listes d’ids comptent
Quand la liste est vide il n’y a rien à publier : cet endpoint rejette les tableaux d’ids vides au lieu de renvoyer un sprite à zéro symboles, ce qui passerait un build négligent et livrerait une UI cassée. L’id_prefix optionnel (par exemple icon-) permet aux monorepos d’espacer les symboles pour que des widgets tiers n’entrent pas en collision avec votre propre id home. Le view_box optionnel vaut par défaut le canevas courant 0 0 24 24 des jeux style Material, mais vous pouvez passer tout viewBox à quatre nombres pour que des artboards 16 pixels ou personnalisés restent cohérents sur tout le sprite.
Contrat d’entrée, forme de la réponse et règles de validation
Envoyez en POST un corps JSON avec ids, un tableau non vide obligatoire de chaînes (les alias icon_ids et icons sont acceptés). Les ids de symbole finaux en double—après application de l’id_prefix optionnel—échouent avec un message invalid_input clair pour que vous corrigiez le catalogue au lieu d’écraser des symboles dans le navigateur. view_box est optionnel et vaut par défaut 0 0 24 24 ; s’il est fourni, il doit être quatre nombres séparés par des espaces avec largeur et hauteur positives. id_prefix est optionnel et vide par défaut ; s’il est défini, il doit être un jeton de nom valide pour que l’id de symbole concaténé reste légal. En cas de succès le corps inclut count, le view_box et l’id_prefix normalisés, symbol_ids dans l’ordre d’entrée, sprite_markup comme un svg masqué multiligne contenant un symbol vide par id, use_snippets comme objets avec champs id et snippet prêts à coller, et use_list_markup joignant ces extraits par des sauts de ligne pour des démos rapides. Les appels réussis utilisent le solde KIT prépayé au prix de base publié $0.002 car c’est un travail de parse pur, sans jetons de modèle ni réseau sortant.
Où la génération de sprite et de use apporte de la valeur
Les équipes de design system génèrent l’enveloppe du sprite dès qu’un fichier de tokens d’icônes change, puis ouvrent une PR qui n’ajoute que des enfants path dans les symboles existants. Sites marketing et thèmes CMS collent des extraits use dans le rich text ou des bibliothèques de shortcodes sans enseigner aux auteurs la syntaxe SVG complète. Gardez les listes d’ids en contrôle de version, refusez les publications vides, et vous obtenez une source unique de vérité pour les sprites SVG de symboles sans déployer un CDN d’icônes pour le seul balisage d’enveloppe. Les bibliothèques de composants livrent des contrôles Storybook qui listent les ids de symbole de la même réponse API pour que la documentation n’invente jamais un id que le sprite ne définit pas. Les revues d’accessibilité vérifient que le bloc de définitions est aria-hidden et que les uses décoratifs portent aria-hidden et focusable false comme cet endpoint émet par défaut—les auteurs ajoutent encore aria-label ou title lorsqu’une icône est le seul nom visible d’un contrôle. Les produits multi-marques mappent les préfixes de marque via id_prefix pour qu’un seul pipeline émette brand-a-home et brand-b-home sans bifurquer les handlers. Workers de bord et générateurs statiques peuvent appeler la même forme de module sur le chemin gratuit du navigateur pour les aperçus et sur le chemin API pour des reconstructions en masse après un dump de design.
Cas d'intégration
Exports de design tokens et catalogue d’icônes
Transformez une liste JSON de noms d’icônes en enveloppe de sprite SVG masquée et extraits use correspondants dès que le catalogue change en CI.
Questions techniques
Puis-je espacer les ids avec un préfixe ?
Oui. Définissez id_prefix (par exemple icon-) pour que home devienne icon-home. Les doublons après le préfixe sont rejetés.
Comment définir le viewBox de chaque symbole ?
Passez view_box comme quatre nombres, par exemple 0 0 24 24 (la valeur par défaut) ou 0 0 16 16. Largeur et hauteur doivent être positives.
Combien coûte la génération d’un sprite SVG de symboles ?
L’outil navigateur est gratuit. Les requêtes API utilisent le solde KIT prépayé à $0.002 par appel réussi ; l’entrée invalide n’est pas facturée.