Aller au contenu principal

SVG vers React

Convertir SVG en React, JSX ou TSX

Transformez les fichiers SVG en balisage JSX, en composant React prêt à importer dans TypeScript ou JavaScript, ou en module qui exporte le SVG sous forme de chaîne. Le convertisseur corrige les attributs JSX, convertit les styles en ligne, préserve le viewBox et prend en charge les téléchargements par lots.

Déposez les fichiers ici

Modification des valeurs par défaut pour les nouveaux fichiers

Sortie

Un module complet : les imports, le composant et l'export.

Module

Nomme le composant, la constante exportée et le fichier généré. Par défaut, le nom du fichier en PascalCase.

Langage

Encapsule le composant pour qu'une ref atteigne l'élément svg.

Applique React.SVGProps<SVGSVGElement> à l'élément svg racine, après les attributs du fichier.

Export
Optimisation

Applique le préréglage d'optimisation sûr avant la génération de la sortie.

Supprime width et height à la racine pour que le composant prenne sa taille du CSS ou des props que vous passez. Le viewBox est toujours conservé.

Mise en forme

Remplace chaque remplissage et chaque contour qui nomme une couleur, pour que le dessin hérite de la propriété CSS color. fill="none" est laissé tel quel.

Aperçu

Aucun aperçu. Ajoutez et sélectionnez des fichiers pour voir les résultats.

Aucun fichier pour le moment. Déposez des fichiers ci-dessus ou cliquez sur SÉLECTIONNER DES FICHIERS.

Qu'est-ce que le SVG ?

Le SVG (Scalable Vector Graphics) est un format d'image vectoriel basé sur XML. Au lieu de pixels, un SVG décrit mathématiquement des formes, des chemins, des remplissages et des contours, afin d'être rendu à toute taille sans perte de qualité.

SVG est le format vectoriel standard du Web. Tous les navigateurs modernes le prennent en charge nativement ; il peut être mis en forme avec CSS ou animé avec JavaScript ou SMIL. Il est souvent compact pour les logos, les icônes et les illustrations, mais les fichiers SVG complexes peuvent devenir volumineux.

Quand convertir un SVG en composant React

Les bundlers ne s'accordent pas sur ce que donne l'import d'un fichier .svg : du balisage intégré, une URL, ou rien du tout sans le bon loader. Un composant versionné à côté du reste de votre code contourne le problème. L'icône devient du JSX ordinaire : il passe le contrôle de types, se prête au tree-shaking et accepte des props comme n'importe quel autre composant. La conversion règle aussi ce dont JSX a besoin et que le SVG brut ne fournit pas : stroke-width devient strokeWidth, class devient className, xlink:href devient xlinkHref, et une chaîne de style en ligne devient un objet. Activez Utiliser currentColor et chaque remplissage et chaque contour hérite de la propriété CSS color : un seul composant couvre alors toutes les couleurs dans lesquelles vous l'utilisez.

Comment convertir un SVG en composant React en ligne

  1. 1

    Déposez vos SVG, ou cliquez sur SÉLECTIONNER DES FICHIERS, pour les ajouter à la file. Jusqu'à 40 à la fois.

  2. 2

    Choisissez JSX, React Component ou Chaîne SVG, puis définissez le nom du composant, le langage et l'utilisation ou non de currentColor. Le code généré se met à jour à mesure que vous changez les options.

  3. 3

    Copiez le code depuis l'aperçu, ou cliquez sur TOUT ENREGISTRER pour télécharger un fichier par SVG, réunis dans une archive ZIP quand la file contient plus d'un fichier.

Confidentialité : vos fichiers ne quittent pas le navigateur

La conversion s'exécute localement dans votre navigateur à l'aide de JavaScript et WebAssembly. Il n'y a pas de téléchargement de fichiers ni de conversion côté serveur, donc les fichiers que vous ajoutez restent sur votre appareil.

Le traitement local permet de protéger les logos confidentiels, les documents internes et les illustrations client inédites. Les pages et le code de conversion sont mis en cache au fur et à mesure que vous les utilisez, afin que les outils que vous avez déjà ouverts puissent continuer à fonctionner sans connexion réseau.

Questions fréquentes

Quelle est la différence entre les trois sorties ?

JSX vous donne le balisage svg nu, à coller dans un composant que vous avez déjà. React Component vous donne un module complet, imports et export compris, prêt à enregistrer sous HomeIcon.tsx ou HomeIcon.jsx. Chaîne SVG (TypeScript) est un module .ts qui exporte le balisage sous forme de chaîne simple, pour l'injecter dans du HTML, des gabarits d'e-mail, ou tout ce qui n'est pas React.

Le composant accepte-t-il des props comme className et onClick ?

Oui, tant que Propagation des props est activée. Le composant reçoit React.SVGProps<SVGSVGElement> et les applique à l'élément svg racine après les attributs du fichier : className, style, onClick, width et aria-label s'appliquent donc tous et remplacent ce que disait le fichier. Activez aussi forwardRef et une ref atteint l'élément svg lui-même.

Que change l'option Utiliser currentColor ?

Chaque remplissage et chaque contour qui nomme une couleur est remplacé par currentColor : le dessin se peint donc dans la couleur à laquelle se résout la propriété CSS color, et passer color="red" au composant fonctionne. fill="none" est laissé tel quel et garde son sens : ne rien peindre. L'option est désactivée par défaut, car une illustration multicolore est aplatie en une seule couleur quand vous l'activez.