Créer et utiliser un sprite-svg

Si les gabarits comportent des icônes au format svg, elles doivent être placées dans *dev/assets/project/icones/unitaires/*. À titre d’exemple, trois icônes y sont déjà placées.

Une [tâche gulp](/scampi-twig/taches-gulp.html) permet de générer, depuis ce répertoire, un sprite d’icones svg à utiliser dans les gabarits.

$ gulp prep:sprite

Le sprite sera déplacé avec les autres resssources statiques quand on effectuera le build.

Préparation du sprite

Chaque nouvelle icône doit être nettoyée si besoin :

Harmoniser la taille à 96px centrée dans un artboard de 100px*100px
Vérifier qu'aucun élément n'a de bordure. Si ce n'est pas le cas, transformer les bordures en choisissant Objet > Décomposer dans un logiciel de dessin vectoriel (comme Inkscape
Passer tous les fonds de forme en noir afin de supprimer les infos de couleur dans les svg résultants ^[1]
Placer chaque icône "nettoyée" dans le répertoire dev/assets/project/icones/unitaires/.

Utilisation

On utilise le module Scampi [svg-icons](https://pidila.gitlab.io/scampi/documentation/svg-icons.html) comme décrit dans sa documentation.

On note que les icônes sont systématiquement dotées de l'attribut aria-hidden="true" et focusable="false". De cette façon, les aides techniques les ignoreront purement et simplement et la tabulation ne prendra pas le focus sur les svg.

Exemple d'insertion d'une icône :


  <svg aria-hidden="true" focusable="false" class="svg-icon icon-mon_icone">

    <use xlink:href="chemin/vers/icones/sprite.svg#mon_icone" />

  </svg>

Une macro twig est disponible pour simplifier cette insertion :


  (( macro.svg('nom-de-l-icone',baseURL) ))

NOTE IMPORTANTE

Pour que les images svg soient affichées correctement, les pages qui les utilisent doivent être livrées par un serveur web.

La tâche Gulp live permet de lancer le projet dans BrowserSync.

[1] Si les icones n'ont pas déjà été passées toutes en noir à la préparation, on peut modifier le sprite en mode texte, en recherchant les informations de couleur dans le fichier via l'expression régulière fill="#[0-9A-F]{6}" et en les supprimant (ou en les remplaçant par rien).