SVG Forge

SVG en composant React

Collez un SVG, obtenez un composant JSX ou TSX prêt à importer.

ou déposez un fichier / collez du code ci-dessous
Composant React
La sortie s'affiche ici

Fonctionnement

  1. 1Collez du code SVG ou déposez un fichier .svg.
  2. 2Activez la sortie TypeScript et définissez le nom du composant.
  3. 3Copiez le composant généré dans votre base de code.

Gratuit, sans inscription, sans filigrane — tout s'exécute localement dans votre navigateur, vos fichiers ne quittent donc jamais votre machine.

Questions fréquentes

Qu'est-ce qui est converti ?

Les attributs passent en camelCase (stroke-width → strokeWidth), class devient className, et le reste des props est propagé à la racine pour que vous puissiez transmettre taille et couleur.

Dois-je optimiser le SVG d'abord ?

Oui — passez-le d'abord dans l'optimiseur SVG pour un composant plus petit et plus propre. Les deux outils sont à un clic l'un de l'autre.

Outils associés

SVG en Vue

Transformez n'importe quel SVG en composant monofichier Vue 3.

Optimiseur SVG

Nettoyage propulsé par SVGO : des fichiers plus légers, les mêmes pixels. Le gain est visible immédiatement.

SVG en data URI

Encodez du SVG pour img src, url() en CSS ou partout où un URI trouve sa place.