Etape 4 : Remote SVG Symbol§
Notre nouvelle solution devrait donc ajouter les contraintes suivantes :

qui évite des tonnes de requêtes
qui ne passe pas par une font pour des questions de poids et d’accessibilité
qui soit facile à changer lors d’une interaction

• qui puisse être téléchargé à la demande (ex : à l’ouverture d’une modale)
• qui puisse être mis en cache entre chaque page
  Pour régler ces nouvelles contraintes, la solution est de faire en sorte que les icones soient récupérés de manière externe. En effet, si nous reprenons la manière dont on a écrit le SVG à l’endroit où on veut afficher l’icone, nous avions une balise use:

<use href="#icon-home"></use>
Celle-ci passe par un attribut href parce qu’en réalité on n’est pas obligé de définir une ancre dans la page courante. On peut aller chercher la définition SVG à une autre URL.

Ainsi plutôt que de mettre votre SVG qui contient la liste de <defs> au sein de la page, nous allons l’enregistrer dans son propre fichier:

<!-- /images/icon-defs.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<defs>...</defs>
</svg>
A ce moment là, nous pourrons changer notre balise use afin qu’elle utilise la nouvelle URL:

-<use href="#icon-home"></use>
+<use href="/images/icon-defs.svg#icon-home"></use>
Grâce à cela, la liste d’icone se retrouve en dehors de la page HTML et pourra donc être téléchargé et mis en cache au même titre que n’importe quel asset externe.

⚠️ Attention toutefois, il y a une contrainte forte : votre SVG distant doit impérativement être hébergé sur le même nom de domaine. Si ce n’est pas le cas, les navigateurs vont considérer que c’est une faille de sécurité et votre icone ne marchera pas.