Aller au contenu
SvgJsx
Langue: Français

Convertisseur SVG en JSX et en composants React

Collez du code SVG ou déposez des fichiers .svg et obtenez un composant propre, prêt à être commité, pour React, TypeScript, React Native, Vue ou Solid. Tout s’exécute localement dans votre navigateur.

Préréglages:
Déposez des fichiers .svg ici ouLes fichiers sont lus localement avec FileReader et ne sont jamais envoyés.
Options
Export:
const HeartIcon = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" 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: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Aperçu

Aperçu du SVG converti
SVG d’origine
706o
SVG optimisé
538o(-24 %)
Composant
566o

Ce que fait ce convertisseur SVG

Les fichiers SVG exportés depuis Figma, Illustrator, Sketch ou Inkscape sont du XML valide, mais pas du JSX valide. React attend des props en camelCase comme strokeWidth au lieu de stroke-width, className au lieu de class et un objet de style plutôt qu’une chaîne CSS. Les éditeurs ajoutent aussi des déclarations XML, des commentaires, des blocs de métadonnées et des attributs à espace de noms qui alourdissent votre bundle et déclenchent des avertissements.

SvgJsx analyse le SVG avec un petit parseur XML, réécrit chaque attribut sous la forme attendue par votre framework et produit un composant bien formaté. Vous pouvez choisir les types TypeScript, une prop size, des remplissages en currentColor, forwardRef, memo et le style d’export, puis copier le code ou télécharger le fichier.

Comment convertir un SVG en composant React

L’opération ne prend que quelques secondes :

  • Collez le code SVG dans la zone de saisie ou déposez-y un ou plusieurs fichiers .svg.
  • Choisissez le format de sortie : React, React Native, Vue, Solid ou un simple extrait JSX.
  • Définissez le nom du composant et les options comme TypeScript, currentColor et la prop size.
  • Vérifiez l’aperçu en direct et la comparaison de taille, puis copiez le code ou téléchargez le fichier. Plusieurs fichiers sont regroupés dans un ZIP.

Conversions appliquées automatiquement

Les attributs avec trait d’union passent en camelCase (stroke-linecap → strokeLinecap), les attributs à espace de noms sont aplatis (xlink:href → xlinkHref) et les chaînes de style en ligne deviennent des objets JavaScript. Les attributs data-* et aria-* sont conservés tels quels, car React les accepte ainsi. Les éléments script et les gestionnaires d’événements en ligne sont supprimés : un fichier collé ne peut donc jamais glisser du code dans votre application.

Une optimisation légère réduit les espaces et peut arrondir les coordonnées à un nombre fixe de décimales. Pour la plupart des jeux d’icônes, cela retire 20 à 40 % du balisage sans dépendre du lourd SVGO.

Questions fréquentes

Ce convertisseur SVG en JSX est-il gratuit ?

Oui. SvgJsx est entièrement gratuit, sans compte et sans limite d’utilisation. C’est un site statique : il n’y a aucun coût de serveur à vous répercuter.

Mes fichiers SVG sont-ils envoyés quelque part ?

Non. Les fichiers sont lus avec l’API FileReader du navigateur et convertis en JavaScript sur votre appareil. Rien n’est envoyé à un serveur, ce qui permet d’utiliser l’outil avec des logos et icônes confidentiels.

Quelle est la différence entre SVG et JSX ?

SVG est un balisage XML, alors que JSX est une extension de syntaxe de JavaScript. JSX exige des noms d’attributs en camelCase, className au lieu de class, des objets de style au lieu de chaînes et des accolades pour les caractères spéciaux : c’est pourquoi un SVG brut échoue souvent à la compilation.

Est-ce compatible avec les exports Figma et Illustrator ?

Oui. Les métadonnées propres à l’éditeur, les commentaires, les attributs sodipodi et inkscape ainsi que la déclaration XML sont supprimés par défaut, et les dégradés, masques et tracés de détourage continuent de fonctionner car les id référencés sont conservés.

Puis-je convertir plusieurs icônes SVG à la fois ?

Oui. Déposez plusieurs fichiers .svg : chacun devient un composant portant le nom du fichier. Téléchargez-les tous dans un ZIP qui contient aussi un fichier index réexportant chaque icône.