SVG naar JSX

Zet ruwe SVG-markup om in een React-component die direct kan worden geplakt. Het herschrijft SVG-attributen naar React-compatibele camelCase-props (class naar className, stroke-width naar strokeWidth, xlink:href naar xlinkHref en nog vele andere), converteert inline-stijlstrings naar React-stijlobjecten, sluit void- en SVG-vormelementen zelfstandig, en verwijdert de standaard namespace xmlns="http://www.w3.org/2000/svg".

1. Plak je SVG-markup (moet <svg> en </svg> bevatten) in het invoervak 2. Klik op Prettify om de markup voor de conversie automatisch te inspringen (optioneel) 3. Stel een Componentnaam in (standaard SvgComponent, alleen alfanumerieke tekens en underscore) 4. Schakel de "use client"-richtlijn en/of de useMemo-hook naar behoefte in of uit 5. Klik op Convert om het JSX-onderdeel te maken en kopieer het naar het klembord

Het veld Componentnaam bepaalt de geëxporteerde identificator. Als het selectievakje "use client" is ingeschakeld, wordt de uitvoer voorafgegaan door "use client" op een eigen regel en als default zonder props geëxporteerd; anders wordt het geëxporteerd als een benoemde const die props accepteert en svg retourneert. Als useMemo is ingeschakeld, wordt de SVG-markup gewikkeld in useMemo(() => (...), []). De invoer moet zowel <svg als </svg> bevatten, anders wordt de conversie geweigerd met een ongeldige-SVG-fout.