Comment utiliser SVG dans React

SVG est un excellent moyen de développer des visuels évolutifs et réactifs. Cet article présente les SVG et différentes méthodes pour les utiliser dans une application React.

SVG est un format graphique vectoriel basé sur XML permettant de concevoir des graphiques bidimensionnels avec une grande prise en charge de l’interactivité. Comme son nom l’indique, les graphiques vectoriels évolutifs nous permettent de créer des graphiques visuellement attrayants et dynamiques pour les applications Web.

Comparés à d’autres formats d’images raster tels que JPEG ou PNG, les SVG peuvent libérer de la bande passante, améliorer les performances des pages, être rendus dans n’importe quelle taille sans perte de qualité et être facilement localisés en mettant à jour le texte qu’ils contiennent sans utiliser d’éditeur graphique.

SVG peut être utilisé dans divers cas d’utilisation lorsqu’il est associé à Réagirune bibliothèque JavaScript populaire pour créer des interfaces utilisateur, allant des simples icônes et illustrations aux visualisations de données complexes et aux graphiques interactifs.

Cet article examinera comment utiliser les SVG dans React, présentant brièvement ce qu’est un SVG, les manières courantes d’utiliser les SVG dans les applications React et certaines des meilleures pratiques d’utilisation de SVG dans React.

Une introduction au SVG

De la même manière que HTML fournit des éléments pour divers composants d’une page Web, SVG fournit des éléments pour les cercles, les rectangles et les courbes simples ou complexes. Les documents SVG sont des fichiers texte qui expliquent comment les images vectorielles doivent être restituées dans un navigateur Web ou dans d’autres environnements compatibles SVG. Il comprend un <svg> élément racine et peut inclure des éléments imbriqués qui définissent plusieurs formes de base qui construisent ensemble un graphique.

Jetons un coup d’œil à certains des éléments les plus courants d’un composant SVG :

• Élément SVG : Un élément SVG est l’élément racine d’un document SVG. Il est spécifié comme le <svg> balise et définit le canevas sur lequel les graphiques sont rendus. Il s’agit d’une balise parent dans laquelle d’autres éléments SVG sont imbriqués.
• Formes SVG : Les formes SVG sont les différents éléments qui peuvent être utilisés pour dessiner des formes géométriques de base, telles que des lignes, des rectangles, des polygones et des cercles. Ces éléments sont représentés sous forme de balises XML personnalisées telles que <line>,
  <rect> et <circle>entre autres.
• Attributs SVG : Les attributs définissent les propriétés des éléments SVG, telles que leur position, leur taille, leur couleur et leur opacité. Ces attributs sont définis au niveau des balises d’ouverture des éléments SVG. Vous pouvez les utiliser pour personnaliser l’apparence et le comportement des graphiques SVG.
• Groupes SVG : Un élément de regroupement SVG est représenté par le <g> balise et permet de regrouper plusieurs éléments. Il agit comme un conteneur pour regrouper les éléments associés.

SVG offre plusieurs avantages par rapport aux autres formats graphiques raster. Ces avantages incluent une meilleure évolutivité, des tailles de fichiers plus petites, une accessibilité améliorée, une plus grande personnalisation et une convivialité SEO.

Façons courantes d’utiliser SVG dans React

Il existe plusieurs façons d’utiliser SVG dans React, notamment le SVG en ligne, le SVG avec le <img> tag, SVG en tant que composant React réutilisable et sprites SVG. Nous examinerons ces méthodes en détail dans les sections suivantes.

Utilisation directe en ligne

Nous pouvons utiliser le SVG en ligne directement dans les composants React en incluant le code SVG comme élément distinct. <svg> élément. Cela implique d’intégrer le balisage SVG directement dans le code JSX d’un composant React.

Pour voir comment cela fonctionne en pratique, créez une nouvelle application React à l’aide du create-react-app outil de création de modèles comme indiqué ci-dessous :

npx create-react-app svg-demo

Ensuite, exécutez la commande suivante dans votre terminal pour démarrer l’application sur votre serveur local :

npm start

Ajoutons un exemple d’élément SVG au App composant dans le /src/App.js fichier comme indiqué ci-dessous :

import "./App.css";
function App() {
  return (
    <div className="App">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        fill="currentColor"
        class="bi bi-google"
        viewBox="0 0 16 16"
      >
        <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
      </svg>
    </div>
  );
}
export default App;

Dans cet exemple, nous intégrons directement un exemple d’élément SVG dans le fichier App composant. En conséquence, l’élément SVG sera rendu et affiché dans le navigateur.

L’utilisation de SVG dans une application React via cette méthode présente plusieurs inconvénients. Cela peut donner l’impression que le fichier React est volumineux et difficile à lire. Il a également une réutilisabilité, une flexibilité et une évolutivité limitées et peut entraîner des problèmes d’accessibilité.

Utiliser SVG avec la balise Img

Cette méthode consiste à importer directement des fichiers SVG et à les transmettre en tant que src accessoire d’un <img> étiqueter. Cette configuration est facilitée par Create React App (CRA), qui gère les configurations en coulisses.

Pour utiliser cette approche, créez un assets dossier dans le répertoire /src du projet React et ajoutez-y un fichier SVG.

Ensuite, importez et utilisez le fichier SVG dans votre /src/App.js fichier comme indiqué ci-dessous :

import "./App.css";
import logo from "./assets/instagram.svg";
function App() {
  return (
    <div className="App">
      <img src={logo} alt="" />
    </div>
  );
}
export default App;

Ici, nous avons importé le fichier SVG et l’avons passé comme accessoire src d’un <img> étiqueter.

On peut déjà voir le SVG dans le navigateur.

Il est important de noter que le comportement du SVG est différent lors de l’utilisation de cette approche par rapport à la précédente. Ici, le SVG est rendu sous forme d’image, ce qui lui fait perdre ses propriétés vectorielles d’origine, limitant encore davantage son interactivité et sa flexibilité de style.

Bien que cette approche soit simple et pratique, elle n’est pas recommandée en raison de ses limites importantes.

SVG en tant que composant React réutilisable

Utiliser SVG comme composant React réutilisable est un excellent moyen de tirer parti de sa flexibilité et de son évolutivité dans une application React. Il permet également la personnalisation de l’ensemble de l’application et exploite l’architecture basée sur les composants de React pour créer des SVG dynamiques et interactifs.

Il existe différentes manières de procéder. Une solution consiste à créer manuellement un composant React personnalisé qui renvoie un élément SVG particulier, qui peut être utilisé dans d’autres parties de notre application. Une autre option consiste à s’appuyer sur des outils automatisés comme SVGR, un outil de transformation SVG, pour gérer le processus de conversion. Plus d’informations sur SVGR seront fournies plus loin dans cette section.

Pour créer un composant React personnalisé, créez un Logo.js fichier dans le src répertoire et ajoutez-y ce qui suit :

export default function Logo({ fillColor }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="48"
      height="48"
      fill={fillColor}
      class="bi bi-google"
      viewBox="0 0 16 16"
    >
      <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
    </svg>
  );
}

Nous avons créé un Logo composant qui renvoie un exemple d’icône Google SVG. Le Logo Le composant peut ensuite être rendu dans n’importe quelle partie de l’application. Pour montrer les prouesses de la personnalisation, nous avons réalisé le fill propriété dynamique afin qu’elle puisse être définie à partir d’un composant parent.

Pour démontrer cela, importez et utilisez ce composant dans le /src/App.js fichier comme indiqué ci-dessous :

import "./App.css";
import Logo from "./Logo";
function App() {
  return (
    <div className="App">
      <Logo fillColor="red" />
    </div>
  );
}
export default App;

Dans le code ci-dessus, nous avons importé le Logo composant et réglez le fillColor propriété à red.

SVGR, quant à lui, est un outil universel qui peut transformer SVG en composants React, éliminant ainsi le besoin de créer des composants React personnalisés pour chaque SVG. Avec SVGR, un SVG brut peut être facilement transformé en un composant React entièrement fonctionnel.

À partir de la version 2.0, Create React App est désormais livré avec SVGR préinstallé. Cela permet aux utilisateurs d’importer directement des fichiers SVG en tant que composants React sans configuration supplémentaire, ce qui en fait une fonctionnalité pratique dès la sortie de la boîte.

Nous avons utilisé Create React App pour démarrer ce projet de démonstration, afin que nous puissions immédiatement voir comment cela fonctionne.

import "./App.css";
import { ReactComponent as Logo } from "./assets/google.svg";
function App() {
  return (
    <div className="App">
      <Logo />
    </div>
  );
}
export default App;

Dans le code ci-dessus, le ReactComponent import est une syntaxe spéciale qui indique à Webpack de charger le SVG en tant que composant React au lieu d’une chaîne simple. Le composant React résultant peut ensuite être renommé selon vos préférences.

Le composant React aura une syntaxe JSX, ce qui signifie qu’il pourra être facilement personnalisé via des accessoires.

Lorsque vous n’utilisez pas Create React App, il existe d’autres moyens de configurer SVG pour automatiser les transformations SVG dans les applications basées sur React. Cliquez sur ici pour apprendre plus.

Nous pouvons simplifier davantage cela en n’important pas ReactComponent et à la place, écrivez la syntaxe comme indiqué ci-dessous :

import Logo from "./assets/google.svg";

Cependant, y parvenir nécessite quelques ajustements supplémentaires puisque nous utilisons Create React App, qui a déjà certaines configurations par défaut en place. Nous devons modifier les configurations SVGR déjà mises en place par Create React App.

Dans le /node_modules dossier, ouvrez le react-scripts/config/webpack.config.js fichier et mettre à jour le use propriété de la section SVG des objets de configuration comme indiqué ci-dessous :

    {
      test: /\.svg$/,
      use:  ['@svgr/webpack'],
      issuer: {
          and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
      },
    }

Cliquez sur ici pour plus de détails sur la façon de travailler avec le chargeur webpack fourni par SVGR.

Sprites SVG

Les sprites SVG combinent plusieurs icônes SVG en un seul fichier, appelé sprite, qui peut ensuite être utilisé pour restituer des SVG individuels dans une application. Les sprites SVG peuvent aider à réduire le nombre de requêtes HTTP effectuées et à améliorer les temps de chargement des pages. Une seule requête pour le fichier sprite est effectuée plutôt que plusieurs requêtes pour obtenir les fichiers SVG individuels utilisés dans une application.

Un sprite SVG est généralement un fichier unique avec un svg imbrication de plusieurs balises <symbol> les éléments représentant chaque SVG ont été fusionnés pour constituer le sprite.

Pour utiliser un sprite SVG, il faut définir un <use> élément qui fait référence à <symbol> élément que nous voulons restituer. Le xlinkHref attribut du <use> l’élément pointe vers le id de la <symbol> élément.

Nous pouvons créer manuellement un sprite SVG en créant un <symbol> élément pour chaque SVG que nous voulons combiner, mais ce processus a tendance à être laborieux et long. Il existe quelques outils et bibliothèques gratuits qui gèrent la génération de sprites en quelques secondes.

Un exemple est ce site Web. Il utilise le module de projet SVG sous le capot pour sélectionner plusieurs fichiers SVG et les combiner en un sprite.

Ouvrir le site Web dans votre navigateur et sélectionnez plusieurs fichiers SVG en cliquant ou en déposant plusieurs fichiers dans l’espace ouvert du site Web. Le site Web génère le sprite, qui peut ensuite être copié et enregistré dans un nouveau .svg déposer à n’importe quel emplacement préféré de votre application.

Pour le démontrer, créez un sprite.svg et copiez-y le sprite généré. Vous trouverez ci-dessous comment utiliser un SVG particulier à partir du sprite.

import "./App.css";
import sprite from "./assets/sprite.svg";

function App() {
  return (
    <div className="App">
      <svg>
        <use xlinkHref={`${sprite}#instagram`} />
      </svg>
      <svg>
        <use xlinkHref={`${sprite}#google`} />
      </svg>
      <svg>
        <use xlinkHref={`${sprite}#facebook`} />
      </svg>
    </div>
  );
}
export default App;

Ici, nous avons importé le sprite. Ensuite, nous avons lié les SVG en utilisant le xlinkHref attribut du use élément.

Les identifiants dans le code ci-dessus renvoient aux exemples de SVG que j’ai utilisés pour générer le sprite ; cependant, vous pouvez toujours obtenir l’identifiant d’un SVG particulier dans un sprite en vérifiant les accessoires sur le symbol élément relatif à ce SVG.

Voici à quoi ils ressemblent dans le navigateur.

Conclusion

SVG est un excellent moyen de développer des visuels évolutifs et réactifs pour les applications React. Les développeurs peuvent générer des graphiques réutilisables, performants et visuellement attrayants pour leurs applications React en important directement des fichiers SVG, en tirant parti de SVGR pour créer des composants SVG React ou en utilisant des sprites SVG. Dans cet article, nous avons présenté les SVG et différentes méthodes d’utilisation des SVG dans une application React.

Ressources utiles