Les pubs vous déplaisent ? Aller Sans pub Auj. 

Convertisseur SVG en composant React JSX

PromoteurTexte

ANNONCE · Supprimer ?

SAISIR

Processus automatique

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Convertisseur SVG en composant React JSX

Collez le markup SVG brut et obtenez un composant fonctionnel React propre. L'outil applique une conversion en camelCase déterministe pour chaque attribut, supprime les syntaxes non-JSX et enveloppe la sortie dans un composant prêt à être importé — typé si désiré, optionnellement. forwardRef-wrap, et redimensionné via des props. Tout se déroule localement dans votre navigateur, donc vos icônes et logos ne quittent jamais votre machine.

Comment utiliser

Collez l'ensemble <svg>…</svg> dans la zone de saisie.
Définissez un nom de composant (format PascalCase, comme ArrowRightIcon).
Activer TypeScript, forwardRef, des props de taille scalable et de propagation de props pour s'adapter à votre projet.
Copiez le JSX généré ou téléchargez-le au format .tsx / .jsx fichier.

Caractéristiques

attributs en camelCase – stroke-width devient strokeWidth, fill-rule devient fillRule, et ainsi de suite selon l'ensemble de la spécification SVG.
Gestion des mots réservés – class est réécrit en className, for à htmlForet xlink:href à xlinkHref.
Analyseur de style inline – style="color: red; font-size: 12px" est converti en un objet de style JSX avec des clés en camelCase.
Sortie TypeScript – génère React.SVGProps<SVGSVGElement> des typings lorsqu'activé.
Mode icône scalable – remplace la largeur/hauteur fixe par des props avec des valeurs par défaut sensibles. width et height Wrapper React.forwardRef
– émet un composant avec un React.forwardRef pour les outils de développement. displayName Propagation des props
– transmet des props arbitraires à la racine afin que les consommateurs puissent définir <svg> , des attributs ARIA ou des gestionnaires d'événements. classNameFonctionnant hors ligne
– l'SVG ne quitte jamais le navigateur ; aucune upload, aucun tour de serveur. Pourquoi React et JSX modifient-ils les noms des attributs SVG ?

 FAQ

JSX se compile directement en accès aux propriétés d'objets JavaScript, et les identificateurs JavaScript ne peuvent pas contenir des traits de soulignement. React standardise donc sur des noms en camelCase qui reflètent les noms des propriétés du DOM — par exemple,

car le DOM l'expose sous la forme stroke-width devient strokeWidth . Un petit nombre d'attributs ( element.strokeWidth) collident avec des mots réservés JavaScript et sont renommés (class, for) pour éviter les conflits de parseur.className, htmlForQuel est l'effet de React.forwardRef sur un composant SVG ?
Par défaut, un composant fonctionnel ne peut pas recevoir un

de la part de son parent — React l'ignore silencieusement. ref expose le nœud DOM sous-jacent au parent, ce qui est essentiel lorsque vous avez besoin d'accéder directement au React.forwardRef pour la gestion du focus, la mesure ou l'intégration avec des bibliothèques d'animation comme Framer Motion ou GSAP. <svg> Pourquoi utiliser des composants React au lieu d'images inline ?
En intégrant un SVG sous forme de JSX, vous obtenez un contrôle total sur l'arborescence du DOM : vous pouvez personnaliser les traits et les couleurs via des variables CSS, animer des segments individuels, changer les couleurs en temps réel, et éliminer les icônes inutilisées lors de la compilation. Un

se comporte comme un élément raster opaque — vous ne pouvez pas personnaliser ses composants depuis la page hôte. <img src="icon.svg"> Pourquoi conserver largeur et hauteur comme props au lieu d'attributs fixes ?
Les dimensions fixes en pixels fixent la taille de l'icône à une seule valeur et la rendent difficile à intégrer dans une mise en page. L'exposition de

en props (souvent associée à l'original width et height ) permet aux consommateurs de rendre le même composant à 16px dans un outil de navigation et à 48px dans un banner principal, avec le scalage vectoriel de l'SVG qui préserve la netteté à chaque taille. viewBoxMyIcon

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?