Afficher des SVG via un composant React

Avec les avancées du développement Web, l’affichage d’icônes dans une application est passée d’une image de type GIF, JPEG ou PNG à l’utilisation de composants vectoriels, ou communément appelés SVG (Scalable Vector Graphics). Le maintien d’icônes de type SVG dans une page web peut vite devenir assez fastidieuse (l’écriture XML étant assez verbeuse), surtout si vous disposez d’icônes redondantes utilisées un peu partout dans votre application.

Heureusement, il existe des solutions pour centraliser le code. Dans le cas d’une application développée sous React, il suffit de passer par la création d’un composant dédié qui s’appuierait sur un objet littéral contenant la définition de nos icônes.

Pour nous aider dans la conception de notre composant, il faut revenir sur la structure d’un fichier SVG et voir quels sont les attributs à extraire pour définir notre fichier de configuration.

Définition du fichier de configuration

La forme d’un objet SVG est représentée par un ensemble de coordonnées permettant la génération d’une image vectorielle. Le code XML définissant un SVG dans une page web est généralement de la forme suivante :

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
  <title>Exemple simple de figure SVG</title>
  <desc>
    Cette figure est constituée d'un rectangle vert,
    d'un segment de droite rouge, d'un cercle bleu et d'un texte.
  </desc>
   
  <rect width="100" height="80" x="0" y="70" fill="green" />
  <line x1="5" y1="5" x2="250" y2="95" stroke="red" />
  <circle cx="90" cy="80" r="50" fill="blue" />
  <text x="180" y="60">Un texte</text>
</svg>

Ici nous sommes en présence de formes simples. Mais dans le cas de formes plus complexes, le SVG propose de définir des path à partir de commandes relatives. Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple:

<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ. Bon d’accord, c’est un carré, mais vous voyez l’idée…