SVG → React : du fichier brut au composant prêt à l'emploi

Convertissez vos icônes SVG en composants React/JSX, optimisez-les et intégrez-les dans votre design system.

21.07.2026

10 min de lecture

Partager cet article:

SVG

react

jsx

frontend

components

Tutoriel

Pourquoi passer du SVG brut au composant React

Coller un SVG inline dans du JSX casse souvent au premier build : attributs HTML (`class`, `stroke-width`) incompatibles, balises `<style>` difficiles à maintenir, taille de fichier gonflée par un export Figma. L'convertisseur SVG vers JSX en ligne transforme un fichier `<svg>` en composant React prêt à copier — avec renommage d'attributs (`className`, `strokeWidth`), nom de composant personnalisable et option TypeScript. Tout le workflow tourne dans le navigateur sur le hub outils SVG, sans compte ni upload serveur. Pour le contexte optimisation, voir aussi l'article SVGO presets expliqués.

Conversion SVG → composant fonction React en un clic

Attributs SVG mappés vers la syntaxe JSX (className, fillRule…)

Options : nom du composant, export default, TypeScript

Optimisez d'abord avec optimize-svg, convertissez ensuite

Traitement 100 % local — idéal pour des assets clients sensibles

Exemple : icône UI dans un design system

Avant / après dans le repo

Une icône 24×24 exportée depuis Figma peut peser 3–6 Ko en SVG brut. Après optimize default, souvent 1–2 Ko. Le JSX généré reste lisible grâce au <a href="/fr/beautify-svg" class="text-primary hover:underline">beautifier SVG en ligne</a> sur le markup intermédiaire si vous devez auditer les paths.

Avant optimisation

Taille des fichiers :SVG source ~4,8 Ko

Temps de chargement :—

Après optimisation

Taille des fichiers :optimize ~1,9 Ko · composant JSX ~2,1 Ko

Temps de chargement :—

Impact bundler (contexte léger)

Chaque composant icône importé est inclus dans le chunk JavaScript de votre app — contrairement à un fichier `.svg` servi en statique. C'est le trade-off habituel React ; le <a href="/fr/minify-js" class="text-primary hover:underline">minificateur JavaScript en ligne</a> illustre la compression côté JS, mais la première ligne de défense reste un SVG source léger avant conversion.

Bonnes pratiques : props, className et accessibilité

Styling avec className et currentColor

Le convertisseur mappe `class` → `className` et les attributs kebab-case SVG vers camelCase React. Pour un theming cohérent, éditez le SVG source ou le JSX pour utiliser `fill="currentColor"` et contrôler la couleur via CSS/Tailwind sur le composant parent.

Préférer `currentColor` aux hex fixes pour les icônes UI

width/height → classes utilitaires plutôt que pixels figés

Spread props : `<svg {...props} className={cn('h-5 w-5', props.className)}>`

Ne pas compter sur les `<style>` internes — ils sont exclus du JSX

beautify-svg pour relire le markup après edits manuels

Accessibilité : décoratif vs informatif

Une icône seule à côté d'un libellé texte est décorative → `aria-hidden="true"` sur le `<svg>`. Une icône qui porte le sens (ex. statut erreur sans texte) doit garder `<title>` / `<desc>` ou un `aria-label` explicite. FastMinify preserve title/desc dans optimize ; vérifiez qu'ils survivent à la conversion.

Décoratif : `aria-hidden` + texte adjacent visible

Informatif : title/desc ou aria-label sur le composant

validate-svg sur le SVG source avant jsx

Article à venir : SVG accessibilité (hub SVG)

Ne pas supprimer viewBox — requis pour le scaling responsive

Pièges courants après conversion

Noms de composant invalides (`icon-arrow`) → repli silencieux sur `SvgIcon` (l'outil signale le fallback). XML invalide ou plusieurs racines → erreur de parsing. IDs dupliqués si vous inlinez plusieurs fois le même composant sans sprite.

Toujours PascalCase pour componentName

Une seule racine `<svg>` par fichier

Tester le rendu dans la page cible, pas seulement Storybook

Versionner le `.svg` source + le `.tsx` généré

Re-convertir après chaque changement design, pas patch JSX à la main

Quand l'outil navigateur suffit

Cas d'usage fréquents

Pas besoin d'installer SVGR pour convertir une icône reçue par Slack ou un export Figma ponctuel.

Prototyper un composant icône avant de l'ajouter au repo

Débloquer un dev front sans accès Node / CI

Comparer le JSX généré avec un export SVGR existant

Former un designer sur ce qui part en production

One-shot avant une PR design system

Limites : SVGR et plugins bundler

Ce que le navigateur ne remplace pas

La conversion en ligne est idéale pour explorer et livrer quelques composants. L'import automatique `import Icon from './icon.svg'` à chaque build, le batch sur un dossier `icons/`, et les templates SVGR custom restent du ressort de `@svgr/cli`, `@svgr/webpack` ou `vite-plugin-svgr`.

Générer des centaines de composants depuis un dossier d'assets

Template custom (memo, forwardRef, index barrel)

Hook pre-commit : svg → tsx à chaque modification

Config équipe versionnée dans svgr.config.js

Plugins hors options FastMinify (svgo inline dans SVGR)

Aligner preview navigateur et pipeline

Validez nom, export et structure JSX dans svg-to-jsx, puis reproduisez les mêmes conventions dans SVGR. Optimisez avec le même preset SVGO qu'en CI — voir l'article <a href="/fr/blog/svgo-presets-optimiser-svg-web" class="text-primary hover:underline">SVGO presets</a> et le <a href="/fr/blog/guide-optimisation-svg-web" class="text-primary hover:underline">guide optimisation SVG</a>.

Documenter componentName et export dans le README icons

Même preset optimize en local et en CI

Tests snapshot pour icônes critiques

Ne pas mélanger jsx généré à la main et SVGR sans convention

Hub SVG comme référence outils pour l'équipe

SVGR et écosystème React

Outils complémentaires

FastMinify svg-to-jsx couvre le cas paste → copy JSX avec trois options. L'écosystème npm offre plus de flexibilité pour l'automatisation.

@svgr/cli

Ligne de commande SVGR — référence pour batch et CI.

Avantages :

Batch répertoire entier

Templates et config `.svgrrc`

Intégration pre-commit native

Inconvénients :

Installation Node requise

Courbe d'apprentissage config/plugins

vite-plugin-svgr / @svgr/webpack

Import SVG comme composant React à la compilation.

Avantages :

Automatique à chaque import

Cohérent avec le workflow bundler

Pas d'étape manuelle pour les devs

Inconvénients :

Moins visible pour comparer le JSX brut

Debug conversion plus difficile sans outil en ligne

FastMinify optimize-svg + svg-to-jsx

Chaîne navigateur optimize → convert, sans install.

Avantages :

Privacy-local, zéro config

Options componentName / TypeScript explicites

Parfait pour one-shot et revue visuelle

Inconvénients :

Pas de batch centaines de fichiers

Édition manuelle pour spread props et a11y avancée

Inline SVG, `<img>` ou composant React ?

Trois façons d'afficher un SVG

Le choix impacte le styling, l'accessibilité et la taille du bundle JavaScript. Un composant React convient aux icônes réutilisées dans un design system ; l'inline ponctuel ou `<img src="icon.svg">` reste valide pour des cas simples.

Inline brut : rapide mais attributs non-React, difficile à versionner

`<img>` / asset statique : pas de `currentColor`, cache HTTP simple

Composant React : props, theming, tree-shaking avec le bundler

Sprite `<symbol>` : bon pour des dizaines d'icônes statiques

Composant + optimize SVGO : meilleur ratio taille / maintenabilité

Quand un composant React vaut le coup

Icônes UI (boutons, navigation), logos thémables (`fill="currentColor"`), ou assets partagés entre plusieurs apps React/Next.js. Le composant encapsule le markup et évite de dupliquer 200 lignes de `<path>` dans chaque page.

Design system avec variants couleur / taille

Icônes animées ou interactives (hover via className)

Bibliothèque interne `@company/icons`

Storybook pour preview isolée

Export depuis Figma → optimize → svg-to-jsx → PR

Ce que la conversion ne remplace pas

svg-to-jsx produit du JSX à partir du markup existant. Il ne résout pas les imports `@use` Sass, les partials multi-fichiers, ni la génération automatique à chaque commit — pour ça, SVGR en CI reste pertinent. L'outil en ligne excelle pour prototyper, corriger un export, ou onboarder un designer.

Pas de résolution `@import` entre fichiers SVG

Les balises `<style>` embarquées sont ignorées à l'export JSX

Un seul élément racine `<svg>` requis

Le paramètre `props` est généré mais non fusionné sur le `<svg>` — édition manuelle si besoin

Compléter avec validate-svg pour title/desc avant livraison

Workflow FastMinify : optimize puis svg-to-jsx

Étape 1 — Nettoyer et optimiser le SVG source

Un export Illustrator ou Figma contient souvent des métadonnées et une précision excessive. Passez d'abord par l'optimiseur SVGO en ligne (preset safe ou default pour les icônes UI), ou le minificateur SVG pour un nettoyage whitespace-only. Vous réduisez la taille du composant final sans toucher au workflow React.

optimize-svg : presets safe / default / aggressive

minify-svg : whitespace et commentaires uniquement

beautify-svg : relire le markup avant conversion

Conserver title/desc si l'icône est informative

Comparer les stats before/after dans l'outil

Étape 2 — Convertir avec svg-to-jsx

Collez le SVG optimisé dans l'outil SVG vers JSX. Choisissez le nom du composant (doit commencer par une majuscule — sinon repli sur `SvgIcon`), export default ou nommé, et TypeScript si votre codebase est en `.tsx`.

componentName : ex. `ChevronIcon`, `LogoMark`

exportDefault : `true` pour import default, `false` pour export nommé

typescript : ajoute les annotations `React.SVGProps` / `JSX.Element`

Coller ou charger un fichier (limite affichée dans l'outil)

Copier le JSX et coller dans votre repo

Étape 3 — Intégrer dans le design system

Après copie, enveloppez si besoin : fusionnez `props` sur le `<svg>` (`{...props}`), ajoutez `aria-hidden` pour les icônes décoratives, ou `role="img"` + `aria-label` pour les informatives. Validez avec validate SVG en ligne sur le markup source avant conversion.

Spread `{...props}` sur la racine `<svg>` pour className/size

Remplacer fill fixe par `currentColor` si theming

Retirer width/height fixes → sizing CSS (`className="h-5 w-5"`)

Tester rendu Storybook + snapshot visuel

Hub SVG pour les étapes suivantes (Data URI, viewer…)

Conclusion

Le chemin le plus sûr vers un composant React maintenable : optimiser le SVG source, convertir en JSX avec des options explicites, puis ajuster props et accessibilité dans votre design system. FastMinify enchaîne optimize-svg et svg-to-jsx entièrement dans le navigateur — idéal pour prototyper avant de figer SVGR en CI.

Convertissez votre SVG en composant React

Optimize (safe/default) avant svg-to-jsx sur les exports Figma

PascalCase pour componentName — éviter le repli SvgIcon

Fusionner props et aria sur le `<svg>` après copie

validate-svg sur les icônes informatives

SVGR en CI une fois le composant validé en navigateur

Partager cet article

Partager cet article: