Recherche : [svg] - Antichesse (o ^ω^ o)

How to quickly Create and Use SVG Sprites

Comment créer et utiliser des sprites SVG (c'est-à-dire fusionner plusieurs SVG en un seul fichier). Pour résumer...

1) Créer un fichier SVG vide

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
...
</svg>

2) Dans une balise <symbol> y migrer le contenu du SVG à intégrer au sprite sans oublier d'y reporter la viewBox en attribut de la balise <symbol>.

Par exemple le SVG suivant :

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95">
  <defs>
    <style>.cls-1{fill:#00dd7e;}</style>
  </defs>
  <title>8 Point Star</title>
  <path class="cls-1" d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5,50,16.41,63.91V83.59H36.09L50,97.5,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/>
</svg>

Sera intégré comme ceci :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-star" viewBox="0 0 95 95">
    <path class="cls-1" d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5,50,16.41,63.91V83.59H36.09L50,97.5,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/>
</symbol>
</svg>

3) Dans le même fichier, ajouter autant de balises <symbol> qu'il y a de SVG à intégrer au sprite **en leur donnant des ID différents

4) Pour utiliser le SVG il suffit d'écrire ceci dans votre page HTML

<svg class="icon icon--red">
  <use xlink:href="/path/to/sprite.svg#icon-star"></use>
</svg>

Le top du top c'est que le SVG sera mis en cache pas le navigateur, ce qui est une solution idéale pour un set d'icônes à la résolution accroissable (nouveau mot).