Comment utiliser : SVG vers JSX
- Collez votre code SVG, ouvrez un fichier
.svgou cliquez sur Exemple. - Définissez le nom du composant et les options : TypeScript, props spread, suppression des dimensions fixes ou passage des couleurs en
currentColor. - Vérifiez l’aperçu nettoyé pour vous assurer que l’icône s’affiche correctement.
- Copiez le composant ou téléchargez-le au format
.jsx/.tsx, puis importez-le dans votre projet React ou Next.js.
Pourquoi convertir un SVG pour React
Le SVG est du XML, alors que le JSX est du JavaScript qui ressemble seulement à du HTML. Coller un SVG brut dans un composant React provoque en général des avertissements du type « Invalid DOM property stroke-width. Did you mean strokeWidth? », ou une erreur de compilation sur les attributs avec préfixe d’espace de noms comme xlink:href et inkscape:label. Ce convertisseur réécrit le balisage en JSX valide et l’encapsule dans un composant.
Ce qui est converti
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* et aria-* | Conservés tels quels (React attend des tirets ici) |
<?xml?>, <!DOCTYPE>, commentaires, <metadata>, attributs des éditeurs (Inkscape, Sodipodi, Sketch) | Supprimés |
onclick et autres gestionnaires en ligne, <script> | Supprimés : les gestionnaires sous forme de chaîne ne sont pas valides dans React |
Rendre les icônes flexibles
Avec l’option Spread props activée, le composant se termine par {...props} sur le <svg>. Vous pouvez ainsi transmettre className, width, aria-label ou des gestionnaires d’événements : <HeartIcon className="h-6 w-6" />. L’option Supprimer width/height laisse le CSS dimensionner l’icône (un viewBox est ajouté à partir de l’ancienne taille s’il manque). Couleurs → currentColor remplace les remplissages et les traits pour que l’icône hérite de la couleur du texte, ce qui convient parfaitement aux jeux d’icônes monochromes. L’option TypeScript type les props avec SVGProps<SVGSVGElement>.
Accessibilité
Pour les icônes décoratives placées à côté d’un texte, ajoutez aria-hidden="true". Pour les icônes porteuses de sens utilisées seules, conservez un <title> ou transmettez role="img" avec un aria-label.
Confidentialité et sécurité
La conversion s’effectue entièrement dans votre navigateur : le SVG ne quitte jamais votre appareil. L’aperçu est nettoyé : les scripts, foreignObject, les gestionnaires d’événements en ligne et les références externes sont supprimés avant le rendu. Vous utilisez un workflow avec un bundler ? Des outils comme SVGR font la même chose au moment de la compilation ; cette page est destinée aux icônes ponctuelles. Pour utiliser un SVG comme arrière-plan CSS, essayez plutôt SVG vers CSS.
Aussi recherché comme : convertisseur svg react, svg to jsx, svg vers tsx, composant react svg, convertir svg en jsx, svgr en ligne, icône svg react, classname react.
Outils complémentaires : SVG vers JSX
- HTML vers Markdown — Collez du HTML, ou copiez du texte enrichi directement depuis une page web, un Google Doc ou un e-mail, puis obtenez un Markdown soigné à intégrer dans un README, un wiki ou un site statique.
- JSON vers TypeScript — Collez un exemple JSON, comme une réponse d’API ou un fichier de configuration, et obtenez des interfaces TypeScript prêtes à l’emploi, avec types imbriqués, propriétés optionnelles et types union.
- Image en Base64 — Convertissez un fichier PNG, JPEG, SVG, WebP ou GIF en URI de données Base64 avec du code CSS et HTML prêt à être copié — ou collez une chaîne Base64 pour prévisualiser et télécharger l'image.
- Formateur HTML — Collez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y compris les blocs <style> et <script> intégrés.
Questions fréquentes
Pourquoi React affiche-t-il l’avertissement « Invalid DOM property class » ?
class est un mot réservé en JavaScript, donc React utilise className. Il en va de même pour les attributs SVG avec tirets, qui doivent être écrits en camelCase (stroke-width → strokeWidth). Cet outil les convertit automatiquement.Faut-il utiliser xlinkHref ou href ?
href de SVG 2, et xlink:href est obsolète. React accepte toujours xlinkHref, donc le code converti continue de fonctionner. Vous pouvez passer à href si vous n’avez pas besoin de prendre en charge de très anciens navigateurs.Comment changer la couleur de l’icône avec le CSS ?
color de son parent, donc className="text-red-500" ou style={{ color: "red" }} change sa couleur.Le résultat fonctionne-t-il avec Next.js et Vite ?
Cela fonctionne-t-il avec React Native ?
react-native-svg, qui utilise des composants en majuscules comme <Svg> et <Path>. Les attributs en camelCase produits par cet outil constituent un bon point de départ, mais il faut renommer les éléments.