Générateur de feuilles de sprite SVG

Une feuille de sprites SVG est un seul fichier SVG contenant plusieurs icônes définies comme des éléments symboliques. Au lieu de charger 20 fichiers SVG séparés (20 requêtes HTTP), vous chargez un seul fichier de sprite et faites référence aux icônes individuelles avec l'élément use. Cela réduit les requêtes HTTP, améliore la performance de chargement de page et facilite la gestion des icônes. Chaque symbole conserve sa propre vueBox, permettant ainsi que les icônes soient rendues à la bonne échelle. Les feuilles de sprites sont particulièrement précieuses pour les sites web présentant de nombreuses icônes sur plusieurs pages.

Une référence externe utilise un fichier SVG de sprite distinct et fait référence aux icônes via des liens (`href`) pointant vers le chemin du fichier plus l'identifiant du symbole, comme `sprite.svg#icon-name`. Le navigateur charge une fois le fichier de sprite et le cache. Une référence en ligne incrustée intègre directement tout le SVG de sprite dans la page HTML (généralement cachée) et fait référence aux icônes avec simplement l'hash et l'identifiant. Les sprites en ligne fonctionnent immédiatement sans requête supplémentaire mais augmentent la taille du HTML et ne peuvent pas être cachés séparément. Les sprites externes conviennent mieux pour les sites multi-pages, tandis que les sprites en ligne s'avèrent efficaces pour les applications monopage.

Supprimer les attributs de remplissage et de trait des icônes SVG permet de contrôler entièrement leur couleur via le CSS. Cela est essentiel pour les systèmes d'icônes où les icônes doivent changer de couleur lors du survol, en mode sombre ou dans différents contextes d'interface utilisateur. Sans suppression des attributs originaux, les changements de couleur par CSS peuvent ne pas fonctionner car les attributs SVG en ligne ont une spécificité supérieure aux règles CSS. L'option de suppression du remplissage/trait dans cet outil enlève ces attributs afin que vous puissiez définir les couleurs en utilisant les propriétés de remplissage et de trait du CSS ou le mot-clé currentColor.

Le outil convertit chaque nom de fichier en un identifiant symbole compatible avec une URL en supprimant l'extension **.svg**, en le passant en minuscule, en remplaçant les espaces et caractères spéciaux par des tirets, et en supprimant les tirets consécutifs. Par exemple, **My Icon (v2).svg** devient **my-icon-v2**. Vous pouvez éditer tout identifiant généré avant de les combiner. Chaque ID doit être unique au sein de la feuille de sprites car il sert d'identifiant de référence lorsque vous utilisez l'icône. Des noms significatifs comme **icon-arrow-right** ou **icon-close** rendent votre code plus lisible que des noms génériques.