Convertisseur SVG vers JSX

Qu'est-ce que Convertisseur SVG vers JSX ?

Le Convertisseur SVG vers JSX est un outil gratuit dans le navigateur qui transforme du balisage SVG simple en JSX React valide que vous pouvez insérer directement dans un composant. React attend les attributs du DOM en camelCase (strokeWidth, clipPath, fillRule), utilise className au lieu de class et exige l'attribut style comme objet de propriétés en camelCase plutôt qu'une chaîne — cet outil corrige tout cela automatiquement. Les développeurs front-end et les designers l'utilisent pour exporter des icônes depuis Figma, Illustrator ou un jeu d'icônes. Activez le nettoyage facultatif pour retirer les commentaires, les métadonnées d'éditeur et les déclarations XML, et choisissez si la sortie est du JSX en ligne ou un composant fonction, memo() ou forwardRef typé avec React.SVGProps.

Comment utiliser Convertisseur SVG vers JSX

1. Collez votre balisage SVG dans la zone de saisie, ou déposez un fichier .svg sur la zone de dépôt.
2. Lisez le JSX converti dans la zone de sortie : les attributs sont en camelCase, class devient className, un style en ligne devient un objet style et les balises vides s'auto-ferment.
3. Ouvrez les Paramètres et choisissez une Sortie de composant : JSX en ligne, un composant fonction, un composant memo() ou un composant forwardRef.
4. Renseignez le champ Nom du composant pour contrôler le nom utilisé dans l'enveloppe (par exemple MyIcon).
5. Activez Props TypeScript pour typer le composant avec React.SVGProps, ou activez Nettoyer le SVG pour retirer d'abord les commentaires et les métadonnées d'éditeur.
6. Cliquez sur Copier pour copier le JSX, puis collez-le dans votre projet React ou Next.js.

Exemples

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Questions fréquentes

Que modifie le convertisseur dans mon SVG ?

Il renomme les attributs avec tiret et avec espace de noms vers la forme camelCase de React (stroke-width en strokeWidth, xlink:href en xlinkHref), convertit class en className, réécrit une chaîne style en ligne en objet style JSX avec des clés en camelCase et auto-ferme les éléments vides comme path et rect pour qu'ils soient du JSX valide.

Comment fonctionnent les options de sortie de composant ?

Choisissez le JSX en ligne pour placer le balisage n'importe où, ou enveloppez-le en composant fonction, memo() ou forwardRef avec le Nom du composant que vous saisissez. Un composant forwardRef reçoit une ref rattachée au svg racine. Activez Props TypeScript pour typer toute enveloppe avec React.SVGProps et répandre {...props}.

Convertit-il les styles en ligne ?

Oui. Un attribut style="fill:red;stroke-width:2" est réécrit en objet style JSX comme style={{ fill: "red", strokeWidth: "2" }}, avec les noms de propriété en camelCase et les valeurs en chaînes. Les propriétés CSS personnalisées (--var) sont conservées comme clés de chaîne.

Que fait le nettoyage type SVGO ?

Quand Nettoyer le SVG est actif, l'outil retire les déclarations XML, le DOCTYPE, les commentaires, <metadata>, les espaces de noms d'éditeur comme inkscape: et sodipodi:, et l'attribut version du svg, puis condense les espaces — le tout avant l'exécution de la conversion en JSX.

Mon SVG est-il téléversé quelque part ?

Non. Déposer un fichier ou coller du balisage exécute une transformation de chaîne pure entièrement dans votre navigateur, votre SVG n'est donc jamais envoyé à un serveur et l'outil fonctionne hors ligne.