Conversie SVG în React + Tailwind — Gratuit Online, Fără Upload
Convertește markup SVG brut într-o componentă React funcțională cu clase Tailwind CSS. Elimină namespace-uri, convertește atributele în camelCase, injectează props className. Output TypeScript gata de copiat instant.
Întrebări Frecvente
Ce transformări aplică convertorul SVG în React?
Convertorul elimină declarații XML, DOCTYPE, comentarii HTML și atribute de editor (namespace-uri Inkscape, Sodipodi, Figma). Convertește toate atributele SVG din kebab-case în camelCase (ex. stroke-width → strokeWidth, fill-rule → fillRule), mapează class la className și injectează un prop className Tailwind (w-6 h-6 text-current) pe elementul SVG rădăcină. Outputul este o componentă React funcțională compatibilă TypeScript.
Pot personaliza numele componentei și clasele Tailwind?
Da. Introdu numele dorit în câmpul "Component name" — se convertește automat la PascalCase. className rădăcin implicit este "w-6 h-6 text-current" și este transmis ca prop, astfel că apelatorii îl pot suprascrie: <MyIcon className="w-12 h-12 text-blue-500" />. Spread-ul ...props transmite orice atribute SVG suplimentare.
Convertorul gestionează SVG-uri complexe cu gradienți, măști sau clip-paths?
Da. Convertorul procesează toate elementele și atributele SVG copil — gradienți, măști, definiții filtre și clip-paths. Numele atributelor cu cratime sunt convertite în camelCase conform specificației JSX React. Elementele SVG ca <defs>, <linearGradient>, <mask> și <clipPath> sunt păstrate ca atare.