Conversion de SVG en Jsx
Gratuit en ligne Conversion de SVG en Jsx Outil, pas de nécessité d’installation
À propos du convertisseur SVG vers JSX
Transforme le balisage SVG brut en un composant React prêt à être collé. Il réécrit les attributs SVG en props camelCase compatibles avec React (class en className, stroke-width en strokeWidth, xlink:href en xlinkHref et bien d'autres), convertit les chaînes de style inline en objets de style React, ferme automatiquement les éléments void et les formes SVG, et supprime l'espace de noms par défaut xmlns="http://www.w3.org/2000/svg".
Mode d'emploi
1. Collez votre balisage SVG (doit contenir <svg> et </svg>) dans la zone de saisie 2. Cliquez sur Prettify pour indenter automatiquement le balisage avant la conversion (facultatif) 3. Définissez un Nom de composant (par défaut SvgComponent, caractères alphanumériques et tiret bas uniquement) 4. Activez ou désactivez la directive "use client" et/ou le hook useMemo selon vos besoins 5. Cliquez sur Convert pour produire le composant JSX et copiez-le dans le presse-papiers
Options de sortie du composant
Le champ Nom de composant contrôle l'identifiant exporté. Avec la case "use client" cochée, la sortie est préfixée par "use client" sur sa propre ligne et exportée par défaut sans props ; sinon, elle est exportée en tant que const nommé qui accepte des props et renvoie svg. Avec useMemo activé, le balisage SVG est enveloppé dans useMemo(() => (...), []). L'entrée doit contenir à la fois <svg et </svg>, faute de quoi la conversion est rejetée avec une erreur de SVG invalide.
▶Quels attributs SVG sont convertis automatiquement ?
▶Que fait Prettify ?
▶Pourquoi l'attribut xmlns est-il supprimé ?
▶Puis-je obtenir un composant client Next.js ?
Si cet outil vous a été utile, pensez à m’offrir un café.
Achetez-moi un café.