Que fait le convertisseur SVG vers composant ?

Il transforme un SVG brut en un composant réutilisable React (JSX/TSX) ou Vue 3. En plus d'encapsuler le SVG dans le composant, il nettoie le code et adapte les attributs au format correct de chaque framework.

Comment fonctionne la conversion vers React ?

Dans React, les attributs sont convertis en camelCase (par exemple, stroke-width devient strokeWidth), class devient className et le style en texte devient un objet. Le SVG est encapsulé dans un composant fonctionnel qui transmet les props à l'élément svg — idéal pour les systèmes d'icônes.

Et la conversion vers Vue 3 ?

Dans Vue 3, le SVG est placé dans un bloc template au sein d'un Single File Component avec script setup (lang ts). Les attributs restent au format HTML (kebab-case) et le composant transmet automatiquement les attributs à l'élément racine.

À quoi sert l'option currentColor ?

Elle remplace les couleurs fixes de fill et stroke par currentColor, faisant hériter l'icône de la couleur du texte (la propriété CSS color). C'est essentiel dans les systèmes d'icônes, car cela permet de recolorer l'icône simplement en changeant la couleur de l'élément parent.

Le composant généré prend-il en charge TypeScript ?

Oui. Choisissez React (TSX) pour générer un composant typé avec SVGProps, ou Vue 3, qui utilise script setup (lang ts). Les deux fonctionnent dans les projets TypeScript sans ajustement.

Mon SVG est-il envoyé à un serveur ?

Non. Toute la conversion se fait localement dans votre navigateur via JavaScript. Aucun SVG ni code n'est envoyé aux serveurs de ToolboxHub.

Convertisseur SVG vers Composant React et Vue en ligne gratuit

À propos du Convertisseur SVG vers Composant

Collez un SVG brut et obtenez un composant prêt en React (JSX ou TSX) ou Vue 3. L'outil nettoie le code, convertit les attributs au format de chaque framework (camelCase et className en JSX), peut remplacer les couleurs par currentColor et supprimer les dimensions pour que l'icône s'adapte via CSS. Idéal pour construire des systèmes d'icônes internes. Tout se passe localement dans votre navigateur. Pour réduire la taille du code, utilisez notre Minificateur.

Convertir en 3 étapes

Collez le code SVG dans le champ de saisie.
Choisissez le framework (React JSX/TSX ou Vue 3) et le nom du composant.
Cliquez sur Convertir et copiez ou téléchargez le composant.

Convertisseur SVG vers Composant