Over deze tool
De tool SVG naar JSX-component zet ruwe SVG-markup om in een schone React-component, zoals SVGR dat doet, maar volledig in je browser zonder dat er iets geüpload wordt. Plak een pictogram dat is geëxporteerd uit een designtool en krijg een component die je kunt importeren en stylen. Het parseert de SVG met DOMParser en meldt een duidelijke fout als de markup misvormd is.
Elk SVG-attribuut met koppelteken of namespace wordt in camelCase gezet naar zijn React-naam — stroke-width naar strokeWidth, fill-rule naar fillRule, clip-path naar clipPath, stop-color naar stopColor, xlink:href naar xlinkHref, xmlns:xlink naar xmlnsXlink — terwijl data-* en aria-*-attributen ongemoeid blijven. Inline style-strings worden style-objecten, lege elementen zoals path en circle worden self-closed, en props worden op de root <svg {...props}> gespread zodat de component configureerbaar blijft. Met optionele schakelaars kun je hard-gecodeerde fill- en stroke-waarden vervangen door currentColor (zodat het pictogram de tekstkleur erft), de width en height strippen zodat het naar zijn container schaalt, en de component met forwardRef wikkelen om de onderliggende <svg>-knoop bloot te leggen.
Kies JavaScript- of TypeScript-uitvoer: de TypeScript-variant typeert props als React.SVGProps<SVGSVGElement> en, met forwardRef ingeschakeld, gebruikt forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. De component wordt geproduceerd als een geëxporteerde arrow-functie (export const Icon = (props) => (...)), met de naam en inspringing van je keuze, klaar om in een pictogrammodule te plakken.