Convertir SVG en JSX pour React

Transforme du balisage SVG en composant fonction React : SVGO optimise le SVG dans votre navigateur, puis SVGR le convertit sur le serveur. Les attributs passent en camelCase (stroke-width devient strokeWidth), les tailles numériques deviennent des nombres et {...props} est propagé sur le <svg> racine.

Transformer une icône exportée de Figma ou d’Illustrator en composant React.

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. Conversion runs locally in your browser. Your code is not uploaded.

Original

Result

JSX

Quand l’utiliser

Transformer une icône exportée de Figma ou d’Illustrator en composant React.
Vérifier comment SVGR va réécrire un SVG avant d’ajouter SVGR à un pipeline de build.

Mode d’emploi

Collez du balisage SVG ou chargez un fichier .svg ; une entrée qui n’est pas du SVG valide est refusée avec une erreur.
Ouvrez Paramètres pour désactiver l’optimisation SVGO ou activer et désactiver des plugins comme remove title ou merge paths ; l’aperçu sous l’éditeur compare le SVG d’origine et le SVG optimisé.
Copiez le composant et renommez SvgComponent ; passez className, width ou fill en props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

Composant React (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Détails et limites

SVGO s’exécute dans un Web Worker de votre navigateur ; le SVG optimisé est ensuite envoyé à l’endpoint /api/svg-to-jsx de ce site, où SVGR génère le composant. Ne collez pas de visuels confidentiels.

Avec les paramètres par défaut, les commentaires, <title>, <desc> et les métadonnées d’éditeur sont supprimés et les données de path sont raccourcies (M5.000 12.000 L19.000 12.000 devient M5 12h14). Désactivez l’optimisation pour convertir le SVG tel que collé.

Les chaînes style deviennent des objets style et class devient className.

La sortie cible React DOM ; utilisez SVG vers React Native pour react-native-svg.

FAQ

Pourquoi la racine conserve-t-elle width et height ?

remove dimensions est désactivé dans les paramètres SVGO et SVGR utilise les options par défaut : les dimensions sont donc conservées sous forme de nombres (width={24}). Remplacez-les via les props, puisque {...props} vient après elles.

fill="currentColor" me permet-il de définir la couleur en CSS ?

Oui. currentColor est conservé, donc l’icône suit la couleur CSS de son parent. Les couleurs codées en dur dans les paths ne sont pas remplacées.

Pourquoi le <title> manque-t-il dans mon composant ?

remove title de SVGO est activé par défaut. Désactivez-le dans Paramètres, ou désactivez complètement l’optimisation, si vous avez besoin du <title> pour l’accessibilité.

Une sortie TypeScript est-elle disponible ?

Non. La page produit un composant JavaScript sans annotations de type.

Spécifications et références

SVGR documentation

SVG