SVG vers Composant
Transformez n'importe quel SVG en composant React ou Vue prêt pour la production — avec une prop size, des attributs JSX et aucune dépendance.
Convertir un SVG en composant React ou Vue instantanément
Intégrer un SVG dans une base de code React ou Vue implique de renommer manuellement les attributs, d'ajouter une prop size et de nettoyer les préambules XML. Le convertisseur SVG vers Composant de Zolkit fait tout cela automatiquement — collez votre SVG et obtenez un composant propre et typé en quelques secondes.
Attributs JSX corrects
Convertit automatiquement les noms d'attributs SVG en leurs équivalents JSX : stroke-width → strokeWidth, fill-rule → fillRule, class → className, et bien d'autres.
Conversion instantanée
Les résultats se mettent à jour au fur et à mesure de la saisie. JavaScript pur — pas d'aller-retour serveur, pas de bibliothèques lourdes, pas de WASM. Un traitement rapide dans le navigateur.
Support React & Vue
Générez un composant fonctionnel React typé avec SVGProps, ou un SFC Vue avec un bloc script setup de l'API Composition. Passez d'un framework à l'autre en un clic.
100 % Privé
Votre code SVG ne quitte jamais votre navigateur. Tout est converti en mémoire, sans serveur, sans journalisation, sans collecte de données.
Gratuit pour toujours
Aucun compte requis, aucune limite d'utilisation, aucune restriction. Collez votre SVG, copiez le composant, déployez.
Prop size intégrée
Chaque composant généré accepte une prop size (par défaut 24) qui contrôle à la fois la largeur et la hauteur, facilitant son utilisation à toutes les échelles dans votre système de design.
Comment convertir un SVG en composant
- 1
Collez votre code SVG dans le panneau de saisie, ou déposez-y un fichier .svg.
- 2
Saisissez un nom de composant et choisissez votre framework cible — React (TSX) ou Vue (SFC).
- 3
Copiez le code du composant généré ou cliquez sur Télécharger pour l'enregistrer en fichier .tsx ou .vue.
Questions fréquentes
Quels noms d'attributs SVG sont convertis pour React ?
Tous les attributs SVG avec tirets sont convertis en camelCase : stroke-width → strokeWidth, fill-rule → fillRule, clip-rule → clipRule, stroke-linecap → strokeLinecap, etc. Les cas particuliers class → className et xlink:href → href sont également gérés.
Pourquoi la sortie Vue ne convertit-elle pas les noms d'attributs ?
Les templates Vue prennent nativement en charge les noms d'attributs en kebab-case sur les éléments SVG — le navigateur et le compilateur Vue gèrent correctement stroke-width. Aucune conversion n'est nécessaire, ce qui rapproche la sortie Vue du SVG original.
À quoi sert la prop size ?
Le composant généré remplace les valeurs fixes de largeur et hauteur du SVG par une prop size (par défaut 24). Cela vous permet d'utiliser le composant à n'importe quelle taille : <MyIcon size={32} /> ou <MyIcon size={16} />.
Puis-je utiliser le composant React avec des attributs SVG personnalisés ?
Oui. Le composant React étend React.SVGProps<SVGSVGElement>, vous pouvez donc passer n'importe quel attribut SVG valide en prop : fill, stroke, className, aria-label, etc. Le spread {...props} sur l'élément racine <svg> les transmet tous.
Que se passe-t-il avec les éléments SVG sans enfants, comme <path> ?
Les éléments SVG vides courants (path, circle, rect, ellipse, line, stop et autres) qui apparaissent sous la forme <elem></elem> dans la source sont automatiquement convertis en forme auto-fermante <elem /> requise par JSX.
Cet outil gère-t-il les SVG multicolores ou complexes ?
Oui — le convertisseur traite tous les éléments et attributs du SVG, pas seulement les icônes simples à un seul chemin. Les dégradés, filtres, masques et groupes sont tous préservés. La sortie est le SVG complet enveloppé dans un composant, pas une version simplifiée.