SVG to JSX / React Component Converter

कोई भी SVG paste करें → prop-forwarding और camelCase attributes के साथ clean React component पाएँ

🔒 100% in-browser🆓 Free forever⚡ No sign-up
Note: नीचे दिया गया tool interface अभी सिर्फ़ English में available है। हम tools के UI एक-एक करके translate कर रहे हैं। इस tool को English में देखें →

यह कैसे काम करता है

  1. 1
    SVG markup paste करें

    Figma के dev mode से, icon-library file से copy करें, या raw <svg>…</svg> paste करें।

  2. 2
    Component name और typing pick करें

    Component का name choose करें, और JavaScript या TypeScript output।

  3. 3
    Component copy करें

    Attributes camelCased होते हैं, style object बन जाता है, और props root <svg> पर forward होते हैं।

SVG to JSX / React Component Converter के बारे में

Free SVG to JSX converter। कोई भी SVG markup paste करें और camelCased attributes, prop forwarding और TypeScript typing के साथ clean React functional component पाएँ। Figma, Sketch या Illustrator से icon exports को ready-to-use React components में convert करने के लिए ideal। 712 Tools पर SVG to JSX / React Component Converter पूरी तरह आपके browser के अंदर modern JavaScript APIs use करके चलता है - कोई server आपका data कभी नहीं देखता। मतलब instant results, full privacy और कोई upload limits नहीं।

Debugging session, quick sanity check या production incident - जब भी आपको कोई भी svg paste करें → prop-forwarding और camelcase attributes के साथ clean react component पाएँ करना हो, यह tool जितनी बार चाहें use कर सकते हैं, free में। कोई watermarks नहीं, कोई sign-up नहीं और tool के अंदर कोई ads नहीं।

अक्सर पूछे जाने वाले सवाल

क्या transform होता है?

kebab-case attributes → camelCase (stroke-width → strokeWidth), class → className, style strings → objects, और root <svg> सारे props को size, color और event handlers के लिए forward करता है।

SVGO optimization के बारे में क्या?

यह tool JSX में convert करती है - पहले SVGs shrink करने के लिए SVG Optimizer tool साथ में use करें।

क्या मेरा SVG upload होता है?

नहीं। Conversion pure string manipulation है और पूरी तरह आपके browser में चलती है।

और पढ़ें

5 min read

The SVG workflow that keeps your React bundle small

How to take a Figma export from 15KB to 400 bytes, convert it into a clean React component, and ship icons without a bloated icon library.

Related tools

JSON to CSV

JSON arrays को downloadable CSV में convert करें

Timestamp Converter

Unix time, ISO 8601 और human-readable dates के बीच convert करें

Markdown to HTML

Markdown को live preview के साथ clean HTML में convert करें

YAML ↔ JSON

YAML को JSON में और वापस convert करें, full syntax validation के साथ

JSON → TypeScript

JSON sample से TypeScript interfaces या types generate करें

Base Converter

Binary, octal, decimal और hexadecimal के बीच convert करें