Outil de développement / 26

Convertisseur SVG vers React JSX / TSX

Transformez un balisage vectoriel SVG en code React JSX ou TypeScript TSX propre et structuré en composants.

Convertisseur SVG vers React JSX / TSX: TOEA convertit les attributs SVG en kebab-case en camelCase pour React, transforme les styles inline en objets JS et encapsule l'élément SVG. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie: Outils développeur
Exécutions: Dans votre navigateur
Coût: Gratuit · sans inscription
Disponibilité: Prêt à l'emploi

Nom du composant

TypeScript (React.FC & SVGProps)

Transmettre les props ({...props})

Entrée du balisage SVG brut

Composant React JSX / TSX

import React from "react";

export const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-check" {...props}>
  <polyline points="20 6 9 17 4 12"></polyline>
</svg>
);

Faire se comporter l’icône comme du texte

Un composant d’icône est plus facile à réutiliser lorsqu’il récupère sa couleur et sa taille selon l’endroit où il est placé. Remplacez les couleurs fill ou stroke codées en dur par currentColor afin que l’icône reprenne la couleur du texte environnant, et supprimez width et height tout en conservant viewBox, afin que le CSS ou une className définisse la taille. Faites d’abord passer le fichier dans le nettoyeur SVG pour supprimer les métadonnées de l’éditeur qui finiraient sinon dans votre bundle.

Identifiants, styles et accessibilité

Les dégradés, masques et chemins de détourage sont référencés par leur id. Si vous affichez deux fois le même composant, la page contient des identifiants en double ; la seconde copie peut donc pointer vers le dégradé de la première. Générez des identifiants uniques avec le useId de React lorsqu’une icône en utilise.

Un élément <style> à l’intérieur du SVG empêche JSX de fonctionner, car ses accolades sont interprétées comme des expressions ; déplacez ces règles dans des attributs ou une feuille de style. Pour une icône décorative, ajoutez aria-hidden="true" ; pour une icône porteuse de sens, ajoutez role="img" et un <title>.

Comment l'utiliser

Collez le balisage SVG brut.
Configurez le nom du composant, les interfaces TypeScript et la transmission des props.
Copiez le code du composant React prêt à l'emploi.

Confidentialité et limitations

La transformation du balisage s'exécute entièrement côté client, en JavaScript.

Outils associés

Questions fréquentes

Est-ce compatible avec TypeScript ?

Oui, il génère des composants React.FC<React.SVGProps<SVGSVGElement>> entièrement typés.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis