construire un sprite
☞ tout se passe dans ton navigateur — rien n’est envoyéDéposez vos icônes SVG ici
ou cliquez pour parcourir — jusqu'à 40 fichiers SVG
Aperçu
Collez ceci là où vous voulez les icônes
OneImageTool
Outils d’image gratuits
construire un sprite
Déposez vos icônes et récupérez un seul fichier sprite d'éléments symbol, plus la ligne use de chaque icône, prête à coller.
ou cliquez pour parcourir — jusqu'à 40 fichiers SVG
Aperçu
un fichier, une référence par icône
Chaque icône chargée comme fichier à part, c'est une requête à part, une entrée de cache à part et une occasion à part d'arriver une image trop tard. Un sprite les replie dans un seul document : chaque icône devient un symbol avec sa propre viewBox, rien ne se dessine tout seul, et vous en sortez une là où vous en avez besoin avec use href="#icon-name". Comme la référence passe par l'id et non par une URL, l'icône hérite de currentColor et du CSS posé sur le svg qui l'entoure — exactement ce qu'une pile de balises img ne sait pas faire.
Le difficile n'est pas l'emballage, ce sont les noms. Quarante icônes exportées d'un outil de design contiendront volontiers quarante dégradés nommés « a » et quarante classes nommées « cls-1 », et dès qu'elles partagent un document, la seconde prend en silence la couleur de la première. Chaque id et chaque classe à l'intérieur d'une icône est donc renommée avec l'id de son propre symbole en préfixe, et les quatre cachettes d'une référence — url() dans un attribut, un href pointant vers un fragment, l'attribut style et le CSS d'un élément style — sont réécrites de même. Rien ne déteint.
trois étapes
Jusqu'à 40 fichiers SVG d'un coup, analysés dans votre navigateur. Réordonnez une ligne avec les flèches ; cet ordre est celui des symboles dans le fichier.
Chaque symbole porte le nom de son fichier avec le préfixe devant, et la liste affiche le résultat. Deux fichiers homonymes reçoivent un numéro, pour que deux symboles ne revendiquent pas le même id.
Le sprite se colle dans votre page ou se sert en tant que sprite.svg ; l'extrait vous donne une ligne prête à coller par icône.
réponses rapides
Deux façons. Collez le sprite entier en haut de votre HTML et référencez une icône avec use href="#icon-name" ; ou servez le fichier et référencez use href="/sprite.svg#icon-name". La première évite une requête, la seconde laisse le navigateur mettre un seul sprite en cache pour toutes les pages.
Du nom de fichier, en minuscules, tout ce qui n'est ni lettre ni chiffre devenant un tiret, avec le préfixe devant. arrow_left.svg avec le préfixe par défaut donne donc icon-arrow-left.
Un id XML ne peut pas commencer par un chiffre, et les noms comme 2-arrow.svg sont courants. Le préfixe évite aussi les collisions avec des ids déjà présents sur votre page. Vous pouvez le changer ou le vider ; si le vider rendait un id invalide, un préfixe de secours est remis.
Le second reçoit un numéro. Sans cela, les deux symboles porteraient le même id et toute référence afficherait la première icône — une image fausse en silence, pas une erreur.
Oui. Chaque id et chaque classe dans une icône est renommée avec l'id de son symbole en préfixe, et les références sont réécrites avec : url() dans les attributs, les href de fragment, l'attribut style et le CSS d'un élément style.
Si l'icône utilise fill="currentColor", oui : posez color sur le svg qui porte la référence et l'icône suit. Les icônes à remplissage figé gardent le leur ; le sprite ne réécrit pas vos couleurs.
Jusqu'à 40 à la fois. Un sprite n'a pas de vraie limite propre, mais une feuille nettement plus grosse gagne à être découpée par section du site, pour qu'une page ne porte que les icônes qu'elle utilise.
Non. Les SVG sont analysés et assemblés dans votre navigateur, et l'aperçu est une URL blob issue de votre propre machine. Cet outil n'a aucun serveur capable de recevoir un fichier.
Oui — gratuit, sans filigrane et sans inscription.