Convertisseur SVG en JSX
Collez un SVG et obtenez un composant React, React Native, Vue ou Svelte propre, prêt à copier dans votre projet.
- Aucun envoi
- Fonctionne hors ligne
- Gratuit, sans inscription
- Vos fichiers restent dans votre navigateur
Déposez vos fichiers SVG ici
ou collez du code SVG dans l’éditeur. Vous pouvez ouvrir plusieurs fichiers à la fois.
Votre SVG reste sur cet appareil. Rien n’est envoyé.
Mode d’emploi : Convertisseur SVG en JSX
- 1
Collez votre SVG
Collez le code SVG ou déposez un fichier. Optimisez-le d’abord dans l’onglet Optimiser pour obtenir le composant le plus léger.
- 2
Choisissez un framework
Choisissez React (JSX ou TSX), React Native, Vue ou Svelte. Définissez le nom du composant et des options comme currentColor.
- 3
Copiez ou téléchargez
Copiez le composant, ou téléchargez-le sous forme de fichier .jsx, .tsx, .vue ou .svelte prêt à l’emploi.
Pourquoi un SVG doit être converti avant d’être utilisé dans React
Le JSX ressemble au HTML mais suit les règles du JavaScript. Coller un SVG brut dans un composant React échoue souvent ou génère des avertissements : les attributs avec tiret comme stroke-width et fill-rule doivent passer en camelCase, class doit devenir className et les chaînes style en ligne doivent devenir des objets. Les attributs à espace de noms comme xlink:href et les métadonnées d’Illustrator ou de Sketch doivent aussi être nettoyés.
viewsvg s’occupe de tout et enveloppe le résultat dans un composant nommé qui accepte des props, pour transmettre className, width ou un aria-label depuis le parent.
Conseils pour les composants d’icônes SVG
- Passez d’abord le SVG dans l’optimiseur pour retirer les métadonnées et alléger les tracés.
- Activez Utiliser currentColor pour que les icônes suivent la couleur du texte et fonctionnent en thème clair comme sombre.
- Activez Supprimer width/height et dimensionnez les icônes en CSS pour qu’un même composant serve à toutes les tailles.
- Gardez la
viewBox. Sans elle, l’icône ne peut pas s’adapter.
Tout ce qu’il faut pour travailler avec le SVG
Convertisseur SVG en JSX fait partie d’un même espace de travail pour afficher, modifier, optimiser et convertir des fichiers SVG, sans inscription, sans publicité et sans envoi de fichiers.
Aperçu instantané
Zoom jusqu’à 6400 %, déplacement, ajustement à l’écran et vérification sur fond transparent, blanc, noir ou de la couleur de votre choix.
Éditeur de code en direct
Coloration syntaxique, repères d’erreur par ligne, formatage et minification, recherche et historique d’annulation complet.
Contour et grille de pixels
Voyez chaque tracé en mode contour et vérifiez l’alignement des pixels avec la grille en zoomant.
Inspecter
Taille du fichier et avec gzip, viewBox, arbre des éléments avec mise en évidence et remplacement des couleurs en un clic.
Optimiser avec SVGO
Allégez vos fichiers avec aperçus avant/après et précision réglable. Optimisez tous les fichiers ouverts d’un coup.
PNG, JPG, WebP et ICO
Exportez à n’importe quelle taille jusqu’à 16384 px, avec transparence, ou copiez le PNG directement dans le presse-papiers.
React, Vue et Svelte
Composants JSX/TSX, React Native, Vue et Svelte propres, avec prise en charge de currentColor et des props.
Plusieurs fichiers à la fois
Ouvrez de nombreux SVG en onglets, puis optimisez-les en lot ou téléchargez-les dans un ZIP de SVG ou de PNG.
Privé et hors ligne
Aucun envoi, aucun compte. Votre travail est enregistré dans le navigateur et l’appli fonctionne hors ligne après la première visite.
Questions fréquentes
Qu’est-ce qui change en convertissant un SVG en JSX ?
Les attributs passent en camelCase (stroke-width → strokeWidth), class devient className, xlink:href devient xlinkHref et les chaînes style en ligne deviennent des objets. viewsvg fait tout cela pour vous.
Comment faire hériter la couleur du texte à une icône SVG dans React ?
Activez « Utiliser currentColor ». Chaque fill et stroke est remplacé par currentColor : l’icône suit la couleur CSS de son parent.
React Native est-il pris en charge ?
Oui. Choisissez React Native et vous obtenez un composant basé sur react-native-svg (Svg, Path, G, etc.), avec la ligne d’import correspondante.
Mes fichiers SVG sont-ils envoyés quelque part ?
Non. viewsvg fonctionne entièrement dans votre navigateur. Les fichiers sont lus, affichés, optimisés et convertis sur votre appareil, et rien n’est envoyé à un serveur. Après la première visite, il fonctionne même hors ligne.
viewsvg est-il gratuit ?
Oui. Toutes les fonctions sont gratuites, sans inscription, sans filigrane et sans limite de fichiers.