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 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 c'est le cas, transformer les bordures en choisissant Objet > Décomposer dans Illustrator
  • Passer tous les fonds de forme en noir afin de supprimer les infos de couleur dans les svg résultants (*)
  • Placer chaque icône "nettoyée" dans le répertoire /dev/assets/project/icones/unitaires

Utilisation

On utilise le module Scampi svg-icons comme décrit dans la 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 donc 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

En local, si vos pages ne sont pas rangées sur un espace serveur, les icônes peuvent ne pas être affichées. Il faut soit modifier le navigateur soit placer les fichiers pour qu'ils puissent être affichés avec une url en http. Dans le cadre du projet JO ou tout autre projet scampi-twig, c'est géré grâce à la commande live.


(*) Si les icones n'ont pas déjà été passées toutes en noir à la prépa, on peut ouvrir le sprite dans Sublime en utilisant l'expression régulière fill="#[0-9A-F]{6}" à remplacer par rien.

Les informations données dans cette rubrique correspondent à la version 1.0 release candidate de Scampi-Twig, encore en développement. Pour lire la documentation de la version courante (0.3.1), référez-vous au readme du dépôt.