Transformez vos SVG en JSX avec SVGR

En tant que développeur React, vous vous êtes certainement retrouvé à devoir intégrer des SVG dans vos applications. Il existe plusieurs manières de procéder, la plus élégante est de transformer vos images SVG en composant React. On va voir ici comment s'y prendre.

Comment intégrer des SVG ?

Il y a plusieurs manières pour intégrer des SVG dans votre application React :

1. Utiliser un tag img

const Star = props => (
  <img src="star.svg" alt="Star" width="20" height="20" {...props} />
)

Cette solution est tout à fait viable. Vous pouvez vous servir de SVGO pour nettoyer un peu votre SVG et file-loader si vous utilisez Webpack. Elle présente cependant quelques limites :

  • Une requête HTTP par SVG
  • Impossible de styliser le SVG (la couleur notamment)

2. Utiliser du JSX

const Star = props => (
  <svg viewBox="0 0 512 512" width="20" height="20" {...props}>
    <path fill="currentColor" d="M256 13l79 160 177 26-128 124 30 176-158-83-158 83 30-176L0 199l177-26 79-160z"/>
  </svg>
)

Cette solution consiste à intégrer le SVG directement dans le composant React en JSX. Elle présente plusieurs avantages :

  • Aucune requête en plus, c'est bundlé avec votre JS
  • On peut styliser chaque partie du SVG
  • "currentColor" nous permet d'hériter directement de la couleur du texte

Intégrer vos SVG directement en JSX est la solution à privilégier pour une maintenance facile et un contrôle total. Cependant elle nécessite une opération un peu délicate, passer d'un fichier SVG à un composant React. À première vue, c'est un copier-coller, mais le JSX n'est pas exactement du HTML et ça s'avère très fastidieux quand on a un grand nombre d'icônes.

Passer d'un SVG à un composant React

SVGR logo

C'est là que SVGR entre en scène, il vous permet d'automatiser la génération de composants React à partir de vos SVG. Prenons un exemple concret en partant d'un SVG généré via Sketch :

<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 5</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855">
            <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
                <g id="Content" transform="translate(0.000000, 64.000000)">
                    <g id="Group" transform="translate(24.000000, 56.000000)">
                        <g id="Group-2">
                            <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

En tapant la ligne de commande SVGR :

npx svgr --no-semi --icon --replace-attr-value "#063855=currentColor" my-icon.svg

J'obtiens le code du composant suivant:

import React from 'react'

const SvgComponent = props => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
)

export default SvgComponent

Plutôt cool non 😏 ?

Intégrer SVGR dans mon projet

Plusieurs solutions s'offrent à vous pour intégrer SVGR dans votre projet. À vous de choisir celle qui correspond le mieux à vos habitudes de travail.

Quelle que soit votre solution, la première étape consiste à ajouter SVGR à votre projet :

npm install svgr

1. Par ligne de commande

Une fois installé, SVGR expose une ligne de commande. Une bonne manière de procéder est d'ajouter un script à votre package.json pour automatiser la transformation des SVG.

// package.json
{
  "scripts": {
    "build:svg": "svgr -d svg/ components/
  }
}

Le script suivant permet de transformer chacun des SVG du dossier "svg/" en composant React dans "components/".

Pour le lancer : npm run build:svg

2. En utilisant Webpack

Pour les utilisateurs de Webpack, SVGR propose un loader. Vous pouvez donc directement importer vos SVG dans votre code et laisser la magie de Webpack opérer. Il vous suffit d'ajouter le loader comme ceci :

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['babel-loader', 'svgr/webpack'],
      },
    ],
  },
}

A partir maintenant, vous pouvez importer directement vos SVG sous forme de composant React. Ils seront automatiquement transformés par SVGR.

import React from 'react'
import Star from 'svg/star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)

3. Via Node.js

Le dernier usage, destiné aux utilisateurs plus avancés, vous permet d'utiliser SVGR directement dans un script Node.js. Voici un exemple de code qui transforme un SVG de manière programmatique :

import svgr from 'svgr'

const svgCode = `
<?xml version="1.0" encoding="UTF-8"?>
<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>Dismiss</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="Dismiss" stroke="#063855" stroke-width="2">
            <path d="M51,37 L37,51" id="Shape"></path>
            <path d="M51,51 L37,37" id="Shape"></path>
        </g>
    </g>
</svg>
`

svgr(svgCode, { prettier: false, componentName: 'MyComponent' }).then(
  jsCode => {
    console.log(jsCode)
  },
)

Allez plus loin avec SVGR

SVGR vous permet d'aller très loin dans la transformation. Un grand nombre d'options sont disponibles : optimisation du SVG, formatage code, ajout d'un titre... Je ne vais pas toutes les énoncer mais vous pouvez les retrouver dans la documentation.

Transformer vos icônes

Une "font-icon" est une police dont on a remplacé certains caractères par des icônes. Les icônes bénéficient de la flexibilité d’une police et on peut changer leur taille et leur couleur via CSS. Transformez vos SVG en JSX simplement avec SVGR pour créer des applications React.

Il est possible d'obtenir le même comportement avec SVGR, voici un exemple :

svgr --icon --replace-attr-value "#000000=currentColor" my-icon.svg

On exploite deux options de SVGR :

  • --icon : spécifie "width" et "height" à "1em"
  • --replace-attr-value "#000000=currentColor" : remplace "#000000" par "currentColor" dans tous les attributs du SVG

Avec ces deux options vous obtiendrez le même comportement qu'une "font-icon" classique !

Comment ça marche ?

SVGR permet de transformer du SVG en JSX. Pour y arriver, il délègue chaque partie du travail à des outils spécialisés :

  • SVGO pour l'optimisation
  • H2X pour la transformation
  • Prettier pour le formattage

Attardons-nous un peu sur la phase la plus délicate, la transformation. Elle permet de passer d'un code SVG/HTML à du JSX compris par React. Là où la plupart des librairies passent par une série d'expressions régulières, H2X nous permet d'appliquer des transformations directement sur l'AST du HTML à savoir le DOM. Autrement dit, il décompose la structure du code et applique la transformation.

Si vous faites du React, vous utilisez forcément Babel. Babel est un transpileur permettant d'appliquer des transformations sur du JavaScript. Eh bien H2X c'est aussi un transpileur, il permet d'appliquer des transformations sur du HTML.

Cela permet à SVGR d'appliquer des transformations compliquées telles que "--replace-attr-value" sans aucun effet de bord !

Le code suivant correspondant à la transformation opérée lorsque vous activez l'option "replace-attr-value". Ceux qui sont familiers avec les plugins Babel et la manipulation d'AST ne devraient pas être perdus.

const replaceAttrValue = (value, newValue) => () => ({
  visitor: {
    JSXAttribute: {
      // Appelé chaque fois que H2X traverse un attribut JSX
      enter(path) {
        // On teste la valeur de l'attribut et on la remplace
        // par une nouvelle valeur
        if (path.node.value === value) {
          path.node.value = newValue
        }
      },
    },
  },
})

export default replaceAttrValue

Cette transformation permet de remplacer la valeur d'un attribut sans aucun effet de bord. C'est beaucoup plus safe qu'une expression régulière !

Pour les plus curieux vous pouvez retrouver le code du projet H2X sur GitHub.

J'espère que SVGR vous fera gagner autant de temps qu'il m'en fait gagner chaque jour ! Retrouvez la documentation complète sur GitHub.