SVG vers JSX en ligne — Générateur de composant React

Convertissez du SVG en composant React avec className et attributs camelCase. Export TypeScript optionnel.

Chargement…
SVG vers JSX — guide composant React
Transformez des snippets SVG en composants React sans compilateur lourd. Gère class → className et attributs courants.

Notes développeur

• Blocs <style> intégrés et sprites non supportés en v1. • xlink:href et xmlns convertis pour JSX. • Relisez la sortie avant intégration. • Combinez avec validate-svg pour viewBox/title.

Options

Nom du composant
Identifiant de la fonction React générée (ex. SvgIcon).
Export par défaut
Activé : export default function … ; désactivé : export nommé.
TypeScript
Ajoute une signature de props typée (attributs SVGSVGElement) pour un drop-in TSX.

Quand utiliser cet outil

• Intégrer des icônes marketing dans un design system React. • Convertir un SVG design en composant TSX. • Prototyper un nom de composant. • Comprendre les différences d’attributs JSX.

Exemples

Badge avec attributs peu JSX-friendly

Entrée

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Badge livraison rapide</title> <desc id="badge-desc">Badge arrondi avec icône éclair et fond en dégradé.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">SVG optimisé prêt à intégrer</text> </g> </g> </svg>

Sortie

export default function PromoBadge(props) { return ( <svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" className="promo-badge" role="img" aria-labelledby="badge-title badge-desc" {...props}> <title id="badge-title">Badge livraison rapide</title> <desc id="badge-desc">Badge arrondi avec icône éclair et fond en dégradé.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stopColor="#f97316" /> <stop offset="100%" stopColor="#fb923c" /> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18" /> </clipPath> </defs> <g clipPath="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)" /> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fillOpacity="0.14" /> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z" /> </g> </g> </svg> ) }

Attribut xlink:href

Entrée

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10"><use xlink:href="#dot"/></svg>

Sortie

Produit xlinkHref sur <use> avec enveloppe composant React.

Outils SVG associés

Optimisez via optimize SVG, validez sur validate SVG, ou le hub SVG.

FAQ SVG vers JSX

Conversion React légère

Supporte-t-il le CSS intégré ?

Pas en v1 — les blocs <style> sont ignorés. Les attributs style inline deviennent des objets.

Export TypeScript ?

Activez l’option TypeScript pour typer props.

Sprites ?

Sprites hors scope — collez un seul <svg> racine.

Outils SVG

Prévisualisez, optimisez avec SVGO, exportez en Data URI, redimensionnez, formatez, convertissez en JSX et validez vos SVG — tout dans le navigateur.

Découvrez les autres catégories d'outils

Minifier

Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.

Beautifier

Rendez le code lisible avec une indentation cohérente — beautifiez JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML et plus encore dans votre navigateur.

Déminifier

Développez du code minifié ou compressé — déminifiez JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML et d'autres formats pour déboguer ou relire.

Conversion

Transformez des données entre JSON, YAML, XML et CSV localement — sans envoi serveur.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Outils JSON

Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.

DevOps & Infra

Format/validate/minify HCL, format & lint Dockerfile, validation Compose et .env.

CI/CD

GitHub Actions et GitLab CI — formater le YAML et vérifier la structure des workflows/jobs dans le navigateur.

Logs & observabilité

JSON/NDJSON ligne à ligne et access logs Nginx/Apache — format, filtre, validation et CSV/TSV.

Kubernetes

Manifestes multi-docs, validation structurelle, starters Ingress/Deployment et formatage values Helm.

Réseau / IP

CIDR, sous-réseaux et helpers IPv4/IPv6 — dans le navigateur.

Sécurité & tokens

JWKS, certificats X.509 et scan de secrets — locaux navigateur.

API & schémas

Outils OpenAPI pour formater, valider et analyser vos specs.

Encodage

Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.

Utilitaires développeur

Timestamps, UUID, ULID, Nanoid, cron, mots de passe, regex, slugify, bases, casse, diff texte et chmod — tout côté client.

Texte & Markdown

Comptez, générez un sommaire Markdown et nettoyez des listes de lignes — dans le navigateur.

IA & LLM

Comptage de tokens, estimation des coûts et fenêtre de contexte — 100 % local.

Sérialisation

Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.