Aller au contenu
SvgJsx
Langue: Français

Comment utiliser des icônes SVG dans React

Il existe cinq façons courantes d’intégrer des icônes SVG dans une application React. Ce guide les compare en termes de performances, de style et d’accessibilité, et indique quand choisir chacune.

Préréglages:
Déposez des fichiers .svg ici ouLes fichiers sont lus localement avec FileReader et ne sont jamais envoyés.
Options
Export:
import type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

Aperçu

Aperçu du SVG converti
SVG d’origine
706o
SVG optimisé
548o(-22 %)
Composant
692o

1. Composants SVG en ligne

Convertir chaque icône en composant (l’approche que ce site automatise) offre un contrôle total : les icônes héritent de la couleur via currentColor, acceptent des props comme size et className et peuvent être animées en CSS ou avec une bibliothèque d’animation. Les bundlers éliminent les composants inutilisés (tree shaking), vous n’envoyez donc que les icônes importées.

En contrepartie, le balisage fait partie de votre bundle JavaScript. Pour quelques dizaines de petites icônes, c’est négligeable ; pour des centaines d’illustrations complexes, ça ne l’est plus.

2. Balises img et arrière-plans CSS

<img src="/logo.svg" alt="Entreprise"> est l’option la plus simple, et le navigateur peut mettre le fichier en cache. En revanche, le SVG est isolé de votre CSS : impossible de changer sa couleur au survol ou en mode sombre. Réservez-la aux logos et illustrations qui ne changent jamais.

3. SVGR et loaders au moment du build

SVGR (via @svgr/webpack ou vite-plugin-svgr) convertit les imports .svg en composants au moment du build. C’est pratique pour de gros dossiers d’icônes, mais cela ajoute de la configuration et peut se comporter différemment selon les bundlers ou avec Turbopack. Une conversion unique avec cet outil produit le même type de composant, versionné comme du code source.

4. Sprites SVG et 5. bibliothèques d’icônes

Un sprite regroupe de nombreux éléments <symbol> dans un fichier et les référence avec <use href="#icone">. Il allège le HTML mais complique le rendu côté serveur. Les bibliothèques comme Lucide, Heroicons ou Phosphor fournissent des composants prêts à l’emploi, idéaux si leur style correspond à votre design.

Quelle que soit la méthode choisie, respectez ces règles d’accessibilité :

  • Les icônes décoratives placées à côté d’un texte reçoivent aria-hidden="true".
  • Les icônes autonomes, comme un bouton composé uniquement d’une icône, ont besoin d’un nom accessible via aria-label sur le bouton ou d’un <title> dans le SVG.
  • Conservez un viewBox et dimensionnez les icônes en em ou rem pour qu’elles suivent la taille de police de l’utilisateur.
  • Garantissez un rapport de contraste d’au moins 3:1 pour les icônes porteuses de sens (WCAG 1.4.11).

Questions fréquentes

Quelle est la meilleure façon d’utiliser des icônes SVG dans React ?

Pour les icônes d’interface, les composants en ligne avec currentColor et une prop size sont les plus souples. Utilisez <img> pour les illustrations statiques et une bibliothèque d’icônes si son style convient à votre design.

Les icônes SVG en ligne nuisent-elles aux performances ?

Rarement. Une icône typique de 24×24 pèse 300 à 600 octets après optimisation. Les problèmes n’apparaissent qu’avec des centaines d’icônes complexes affichées en même temps ; un sprite ou <img> est alors préférable.

Vaut-il mieux utiliser SVGR ou convertir les icônes soi-même ?

SVGR convient aux grands jeux d’icônes qui changent souvent, avec une chaîne de build stable. Les composants préconvertis ne demandent aucune configuration et se comportent de la même façon avec tous les bundlers.

Comment rendre les icônes SVG accessibles ?

Masquez les icônes décoratives avec aria-hidden="true" et donnez aux icônes porteuses de sens un nom accessible avec aria-label ou un <title>. Ne comptez jamais sur une icône seule pour transmettre une information essentielle.

Comment dimensionner des icônes SVG avec Tailwind ?

Supprimez width et height fixes, gardez le viewBox et appliquez des classes comme size-5 ou h-4 w-4. Vous pouvez aussi activer la prop size et passer un nombre.