Comme vous l’avez peut-être constaté, il existe plusieurs façons de manipuler des icônes dans une application WEB. Chaque façon de procéder ayant son lot d’avantages et d’inconvénients. Le but de cet article est de parler d’une partie d’entre elles, et ce par rapport à la mise en place d’un Design System et les besoins qui en découlent.
Quels sont alors les enjeux de mettre à disposition des icônes dans un Design System ?
Tout d’abord, cela va permettre d’avoir un lot commun d’icônes pouvant être utilisées par toutes les applications utilisant ce Design System, renforçant ainsi son objectif d’homogénéité des outils développés. De plus, le travail des développeurs en sera facilité par cette centralisation des icônes. Enfin, la solution retenue pour leur utilisation doit prendre en compte plusieurs critères dont notamment le fait de pouvoir leur appliquer des couleurs spécifiques.
Voyons maintenant différentes manières de manipuler des icônes.
“SVG (pour Scalable Vector Graphics en anglais, soit « graphiques vectoriels adaptables ») est un langage construit à partir de XML et qui permet de décrire des graphiques vectoriels en deux dimensions.” Documentation MDN sur les SVG.
Les “inline” SVG vont permettre d’accéder au code des icônes sous forme de balises que l’on pourra insérer directement dans du HTML. Voici un exemple de code présent dans un SVG :
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.684,7.925l-5.131-0.67L10.329,..."></path>
</svg>
Ce qui donnerait :
Ayant accès à ce code, nous pouvons modifier de manière très simple la couleur de l’icône. Par exemple en ajoutant un attribut fill sur la balise <path></path> :
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="red" d="M17.684,7.925l-5.131-0.67L10.329,..."></path>
</svg>
Voici le résultat de cette modification :
Quant à la question de la qualité de l’icône suivant son agrandissement, les SVG étant créés de façon vectorielle, aucune perte de qualité n’aura lieu.
Dernier point important concernant les SVG “inline” : étant attachés au DOM en tant qu’éléments HTML, leur mise en cache dans le navigateur n’est pas possible. En tout cas ni nativement, ni facilement. Donc lorsque les icônes sont mises à disposition via un CDN (Content Delivery Network, autrement dit disponibles en ligne), elles doivent être téléchargées pour être utilisées. Ce téléchargement aura lieu pour chaque icône à chaque fois qu’elle sera affichée dans la page. Ce qui peut être problématique en terme de performance.
<img />L’un des moyens les plus communs d’afficher une icône dans une application est d’utiliser la balise <img />, autrement dit de la considérer comme une image.
Cette façon de faire a l’avantage de pouvoir mettre l’icône en cache dans le navigateur, car elle sera considérée comme une ressource externe téléchargée via une URL.
Cependant, une limite se dévoile assez rapidement : l’impossibilité d’interagir avec l’icône afin de modifier, entre autres, sa couleur. Dans le cadre d’un Design System, cette limite devient une contrainte trop forte et nous oblige à trouver une autre solution.
Une font d’icônes, ou police d’icônes, va nous permettre d’utiliser des icônes comme du texte dans du HTML. Cela implique que nous pouvons interagir avec l’icône, que ce soit pour lui appliquer une couleur, à l’aide de la propriété CSS color, ou pour lui modifier sa taille, à l’aide de la propriété CSS font-size (qui d’ailleurs n’inclura pas de perte de qualité comme dans le cas d’un simple texte).
De plus, tout comme les navigateurs le font pour télécharger des polices d’écriture (Open Sans par exemple), la font d’icônes sera mise en cache dans le navigateur, et ainsi n’importe quelle icône pourra être utilisée dans l’application, sans avoir à retélécharger quoi que ce soit.
Mais comment créer une font d’icônes ?
Plusieurs librairies existent. Prenons le cas des librairies svgo et fantasticon.
svgo est une librairie permettant d’optimiser les fichiers SVG en supprimant le contenu superflu qu’ils peuvent contenir.
fantasticon quant à elle est une librairie permettant de générer une font d’icônes à partir de fichiers SVG. On pourra trouver en sortie de ce traitement divers fichiers, notamment un index.css qui contiendra la déclaration de la nouvelle font à l’aide d’une font-face, ainsi que l’ensemble des classes CSS à appliquer sur une balise spécifique (communément la balise <i></i>) pour afficher telle ou telle icône. Voici un exemple de ce que l’on obtient dans ce fichier CSS :
@font-face {
font-family: "icons";
src: url("path/icons.ttf?56trf6...") format("truetype"), url("path/icons.woff?56trf6...")
format("woff"), url("path/icons.woff2?56trf6...") format("woff2");
}
i[class^="icon-"]:before,
i[class*=" icon-"]:before {
font-family: icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-ic_my-great-icon:before {
content: "\f101";
}
.icon-ic_another-icon:before {
content: "\f102";
}
Nous avons donc en premier lieu la définition de la font-face contenant la nouvelle font-family “icons” ainsi que les URL vers les fichiers de font associés (.ttf, .woff, …).
Vient ensuite la déclaration des classes CSS i[class^="icon-"]:before et i[class*=" icon-"]:before afin d’appliquer des styles globaux sur les balises <i></i> ayant une classe CSS préfixée par icon-, notamment en appliquant la font-family “icons”.
Enfin vient la déclaration de la classe CSS correspondant à chaque icône. On peut voir que la propriété CSS content est utilisée dans ces classes et qu’elle pointe vers un id correspondant en réalité à telle ou telle icône. Cette propriété permet donc de remplacer un élément HTML par un contenu spécifique, ici une icône. Elle est appliquée dans notre cas sur le pseudo élément ::before de la balise <i></i>.
Voici le code HTML pour afficher l’icône ic_my-great-icon dans notre application :
<i class="icon icon-ic_my-great-icon"></i>
Utiliser des SVG inline est une bonne solution pour afficher des icônes dans une application. Cependant, lorsque les icônes sont mises à disposition via un CDN, elles doivent être téléchargées. L’impossibilité de mettre ces icônes en cache dans le navigateur peut devenir un réel problème, pouvant causer des soucis de performance notamment.
La font d’icônes, comme les SVG inline, nous laisse la possibilité d’interagir avec ces icônes, que ce soit avec leur couleur ou leur taille principalement. Comme on le ferait simplement pour du texte dans notre HTML. De plus, cette solution répond à la problématique de la mise en cache dans le navigateur, du fait que la font sera téléchargée une fois par le navigateur et sera ensuite mise en cache, comme n’importe quelle autre font.
Pour ce qui est de l’accessibilité, utiliser des attributs ARIA (tels que aria-label) sur nos icônes nous permet de les rendre accessibles à tous, comme le ferait un attribut alt sur une balise <img/>.
