SVG / Icônes

Générateur de sprites SVG : symboles et utilisation des icônes

Déposez plusieurs icônes SVG pour créer un sprite de symboles. Nettoyez le balisage, dédupliquez les ID issus des noms de fichiers, préservez les viewBox, convertissez éventuellement les fills en currentColor et téléchargez sprite.svg.

Générateur de sprites SVG : symboles et utilisation des icônes: Déposez un ensemble d’icônes SVG pour obtenir un seul fichier sprite contenant un symbole pour chacune, ainsi que l’extrait de code permettant d’utiliser chaque icône. Les scripts, ressources externes et éléments non sûrs sont supprimés, les dimensions sont converties en viewBox si nécessaire, et les fills peuvent être remplacés par currentColor afin que les icônes reprennent la couleur du texte. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie
Outils développeur
Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi
Sprite d'icônes SVGTraitement local

Fonctionne entièrement dans votre navigateur

Jusqu'à 60 icônes · 1 MB chacune · la sélection de fichiers remplace l'ensemble actuel

Les scripts, gestionnaires d'événements, ressources externes, images intégrées, textes et éléments non pris en charge sont supprimés. Les styles intégrés simples deviennent des attributs de présentation. En l'absence de viewBox, la largeur et la hauteur numériques sont utilisées, avec 24 unités comme valeur de remplacement pour chaque dimension manquante. Vérifiez chaque aperçu avant utilisation.

Modifier une icône SVG

Symboles et réutilisation

SVG 2 définit les éléments symbol et use ainsi que le comportement de leur viewBox : https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Traitement local et rendu

Chaque icône est reconstruite à partir d'une liste d'éléments et d'attributs SVG sûrs ; les scripts, les gestionnaires d'événements et les ressources externes ne peuvent donc pas accéder au sprite. Aucun jeu d'icônes tiers n'est inclus. La peinture SVG et currentColor sont spécifiées à l'adresse https://www.w3.org/TR/SVG2/painting.html . Les licences des icônes importées restent sous la responsabilité de l'utilisateur.

Comment l'utiliser

  1. Déposez jusqu’à 60 icônes SVG, de moins de 1 MB chacune.
  2. Examinez les aperçus nettoyés et convertissez éventuellement les fills en currentColor.
  3. Téléchargez le sprite et sélectionnez une icône pour copier son extrait de code d’utilisation.

Confidentialité et limitations

Vos fichiers SVG restent en local. L’outil ne récupère pas les URL intégrées et n’envoie pas vos icônes.

Outils associés

Éditeur SVGNettoyeur SVGSVG vers JSX

Questions fréquentes

Comment utiliser le sprite ?

Insérez une seule fois son SVG dans un conteneur masqué de la page, puis utilisez les extraits de code inline copiés. Pour un fichier séparé, utilisez plutôt sprite.svg#id comme valeur de href.

Que se passe-t-il lorsque le viewBox est absent ?

Les valeurs numériques de width et height, y compris avec l’unité px, définissent un nouveau viewBox. Toute dimension absente ou non prise en charge est remplacée par 24 unités. L’aperçu signale les viewBox corrigés afin que vous puissiez vérifier les recadrages.

Chaque icône conservera-t-elle exactement son apparence ?

Non. Les formes simples, groupes, dégradés, découpages et masques sont conservés, mais les scripts, textes, images intégrées, éléments use et styles non pris en charge sont supprimés. Vérifiez l’aperçu. Vous restez responsable des licences des créations importées.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis