SVG से JSX कन्वर्टर

SVG से JSX कन्वर्टर क्या है?

SVG से JSX कन्वर्टर एक मुफ़्त इन-ब्राउज़र टूल है जो सामान्य SVG मार्कअप को वैध React JSX में बदल देता है जिसे आप सीधे किसी कॉम्पोनेंट में डाल सकते हैं। React DOM विशेषताओं को camelCase (strokeWidth, clipPath, fillRule) में चाहता है, class के बजाय className का उपयोग करता है, और style विशेषता को स्ट्रिंग के बजाय camelCase गुणों वाले ऑब्जेक्ट के रूप में चाहता है — यह टूल इन सबको स्वतः ठीक कर देता है। फ़्रंट-एंड डेवलपर और डिज़ाइनर इसका उपयोग तब करते हैं जब वे Figma, Illustrator या किसी आइकन सेट से आइकन निर्यात करते हैं। टिप्पणियाँ, एडिटर मेटाडेटा और XML घोषणाएँ हटाने के लिए वैकल्पिक सफाई चालू करें, और चुनें कि आउटपुट इनलाइन JSX हो या React.SVGProps से टाइप किया गया फ़ंक्शन, memo() या forwardRef कॉम्पोनेंट।

SVG से JSX कन्वर्टर का उपयोग कैसे करें

1. अपना SVG मार्कअप इनपुट बॉक्स में पेस्ट करें, या कोई .svg फ़ाइल ड्रॉप ज़ोन पर छोड़ें।
2. नीचे आउटपुट बॉक्स में बदला हुआ JSX पढ़ें — विशेषताएँ camelCase में होती हैं, class बन जाती है className, इनलाइन style एक style ऑब्जेक्ट बन जाता है, और खाली टैग स्वयं-बंद हो जाते हैं।
3. सेटिंग्स खोलें और एक कॉम्पोनेंट आउटपुट चुनें: इनलाइन JSX, फ़ंक्शन कॉम्पोनेंट, memo() कॉम्पोनेंट, या forwardRef कॉम्पोनेंट।
4. रैपर में उपयोग किए जाने वाले नाम को नियंत्रित करने के लिए कॉम्पोनेंट नाम फ़ील्ड सेट करें (उदाहरण के लिए MyIcon)।
5. कॉम्पोनेंट को React.SVGProps से टाइप करने के लिए TypeScript props चालू करें, या पहले टिप्पणियाँ और एडिटर मेटाडेटा हटाने के लिए SVG साफ़ करें चालू करें।
6. JSX कॉपी करने के लिए कॉपी पर क्लिक करें, फिर इसे अपने React या Next.js प्रोजेक्ट में पेस्ट करें।

उदाहरण

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

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

कन्वर्टर मेरे SVG में क्या बदलता है?

यह हाइफ़न वाली और नेमस्पेस वाली विशेषताओं का नाम React के camelCase रूप में बदल देता है (stroke-width को strokeWidth, xlink:href को xlinkHref), class को className में बदलता है, इनलाइन style स्ट्रिंग को camelCase कुंजियों वाले JSX style ऑब्जेक्ट में फिर से लिखता है, और path तथा rect जैसे खाली एलिमेंट को स्वयं-बंद कर देता है ताकि वे वैध JSX हों।

कॉम्पोनेंट आउटपुट विकल्प कैसे काम करते हैं?

मार्कअप को कहीं भी रखने के लिए इनलाइन JSX चुनें, या आपके द्वारा दर्ज किए गए कॉम्पोनेंट नाम के साथ इसे फ़ंक्शन, memo() या forwardRef कॉम्पोनेंट के रूप में लपेटें। एक forwardRef कॉम्पोनेंट एक ref प्राप्त करता है जो रूट svg से जुड़ता है। किसी भी रैपर को React.SVGProps से टाइप करने और {...props} फैलाने के लिए TypeScript props चालू करें।

क्या यह इनलाइन स्टाइल बदलता है?

हाँ। style="fill:red;stroke-width:2" जैसी विशेषता को style={{ fill: "red", strokeWidth: "2" }} जैसे JSX style ऑब्जेक्ट में फिर से लिखा जाता है, जिसमें गुण नाम camelCase में और मान स्ट्रिंग के रूप में रखे जाते हैं। CSS कस्टम गुण (--var) स्ट्रिंग कुंजियों के रूप में सुरक्षित रहते हैं।

SVGO जैसी सफाई क्या करती है?

जब SVG साफ़ करें चालू होता है, तो टूल XML घोषणाएँ, DOCTYPE, टिप्पणियाँ, <metadata>, inkscape: और sodipodi: जैसे एडिटर नेमस्पेस, और svg की version विशेषता हटा देता है, फिर व्हाइटस्पेस को समेट देता है — यह सब JSX रूपांतरण चलने से पहले।

क्या मेरा SVG कहीं अपलोड किया जाता है?

नहीं। फ़ाइल छोड़ना या मार्कअप पेस्ट करना पूरी तरह आपके ब्राउज़र में चलने वाला एक शुद्ध स्ट्रिंग रूपांतरण चलाता है, इसलिए आपका SVG कभी किसी सर्वर पर नहीं भेजा जाता और टूल ऑफ़लाइन काम करता है।