Maintenance d’un set d’icônes SVG
Le SVG permet de créer et maintenir un set d’icônes multicolores assez facilement, du simple fait que derrière tout ça… c’est du code ! Petit retour d’expérience…
Personnellement, j’utilise la suite Adobe et Illustrator pour la gestion des SVG, mais d’autres logiciels peuvent tout à fait réaliser la même chose. Définir dans le même fichier .ai tout notre set d’icônes a plusieurs avantages :
- Définir le même viewport pour tous les icônes et avoir la main sur la cohérence des tailles (ex : 48x48 px)
- Maintenir nos icônes au même endroit et tous les exporter en un seul clic dans notre projet web. Les icônes sont enregistrés avec le nom de leur artboard
Ce qu’il faut savoir c’est que l’export SVG ajoute un attribut fill sur les éléments contenant de la couleur. Seul les paths noirs (#000000) n’ont pas d’hexadécimal ajouté dans le code, le noir étant la couleur par défaut du SVG.
C’est un élément important pour la suite puisque l’on va utiliser la technique du sprite svg. Une fois exportés, les icônes sont compilés et compressés dans un seul fichier grâce au module svg-sprite — https://github.com/jkphl/svg-sprite. L’avantage ici est de profiter de l’élément <symbol> de SVG et d’appeler les icônes dont on a besoin avec l’élément <use> grâce à l’id de l’icône. Petit exemple :
<symbol viewBox=”0 0 48 48" id=”my-icon”>
<path d=”…”/>
<path d=”…” />
</symbol>Le module sprite-svg peut facilement être configuré afin d’ajouter automatiquement en id le nom de l’icône. Ensuite dans notre projet nous pouvons appeler un de nos icônes comme cela :
<svg>
<use xlink:href=”./path/to/sprite/file/sprite.svg#my-icon” />
</svg>Utiliser <use> inclut notre svg dans un shadow DOM, et c’est la que ça se corse un peu. Un élément dans un shadow DOM est scopé et non accessible via le DOM. Intéragir directement avec les éléments de notre SVG via notre CSS est donc inefficace.
Imaginons d’abord qu’on veuille réaliser un set d’icônes unicolore. Nous préparons donc tous nos icônes en noir, ce qui permet de n’avoir aucun fill dans nos SVG. Nous pouvons de cette façon attribuer un fill dans notre CSS sur l’élément parent dont on a accès — ici l’élément <svg> avec la class c-ui-icon :
.c-ui-icon {
fill: #FFFFFF;
}Cela à du sens puisque les paths de nos icônes n’ayant aucun fill d’attribué, ils héritent du fill parent.
Mais du coup, comment gérer le multicolore ? Si l’on se reconcentre rapidement sur le fichier du set d’icônes, on y voit des paths gris et des paths de couleurs en plus de ceux en noir. Pour le cas des paths de couleurs, il peut arriver d’avoir besoin qu’un path de notre icône soit toujours de la même couleur et n’ait pas besoin d’être modifié. Dans ce cas on définit la couleur sur notre SVG dans notre logiciel et l’attribut fill avec l’hexadécimal lui sera attribué. Impossible de le modifier ensuite via le CSS.
Les paths gris sont ceux qui vont nous permettre d’intéragir via le CSS avec une deuxième couleur. Pour cela il faut comprendre l’utilité du mot-clé CSS currentColor. Lorsque l’on fait quelque chose comme cela :
.c-ui-icon {
fill: currentColor;
}L’icône se verra tout simplement attribuer la couleur courante de son élément. Si notre icône est inclu dans un élément dont la propriété color est défini à #FFFFFF, l’icône sera lui aussi de cette couleur. Pratique par exemple dans un cas où l’on souhaite que nos icônes soient de la même couleur que les blocs de textes dans lesquels ils se trouvent.
Maintenant imaginons que nos paths gris génèrent un attribut fill défini à currentColor… nous pourrions aisément faire quelque chose comme cela :
.c-ui-icon {
color: #FF0000;
fill: #FFFFFF;
}.c-ui-icon {
color: #FFFFFF;
fill: #FF0000;
}
Nous aurions tous nos paths noirs qui prendraient la couleur du fill (#FFFFFF) dont ils héritent, puis les paths définis à currentColor qui se verraient attribuer la couleur #FF0000 puisque c’est la color définie dans notre class. Magique non ? :)
Malheureusement il n’est pas possible via les logiciels de DAO d’attribuer un fill défini à currentColor. La technique ici consiste à utiliser une couleur qui ne fait pas partie de notre charte graphique (ici #888 dans mon set d’icônes) et de venir remplacer les fill=”#888" par fill=”currentColor”. Un simple script suffit. Pour ma part, la compilation du sprite est pilotée par un script node, grâce à l’aide de cheerio, j’ajoute une étape qui transforme le sprite généré pour remplacer les morceaux que je souhaite :
$(‘svg’).find(‘[fill=”#888"]’).each(function(){
$(this).attr(‘fill’, ‘currentColor’);
});Et c’est gagné ! :) Nous avons la possibilité maintenant de choisir d’utiliser des icônes unicolores ou bicolores (ou multicolores si des couleurs sont définies explicitement dans notre svg) et d’interagir avec ces deux couleurs via notre CSS.
Gist complet du builder avec le module svg-sprite :
Voici plusieurs ressources sur le sujet dont je vous recommande la lecture :
