SVG से JSX कनवर्टर - SVG को React कंपोनेंट में बदलें ऑनलाइन
SVG मार्कअप को React JSX, TSX या React Native कंपोनेंट में तुरंत बदलें। SVG एट्रिब्यूट ऑप्टिमाइज़ करें, कॉपी-रेडी React कोड जनरेट करें।
अक्सर पूछे जाने वाले प्रश्न
SVG से JSX कनवर्टर क्या है?
SVG से JSX कनवर्टर मानक SVG मार्कअप को JSX सिंटैक्स में बदलता है जिसे React एप्लिकेशन उपयोग कर सकते हैं। इसमें 'class' को 'className' में बदलना, हाइफ़न वाले एट्रिब्यूट्स को camelCase में बदलना (जैसे, 'stroke-width' को 'strokeWidth') और इनलाइन स्टाइल्स को JavaScript ऑब्जेक्ट्स में बदलना शामिल है।
React के लिए SVG को JSX में क्यों बदलना होता है?
React JSX का उपयोग करता है, जिसकी सिंटैक्स आवश्यकताएं मानक HTML से अलग हैं। 'class' और 'stroke-width' जैसे SVG एट्रिब्यूट्स को 'className' और 'strokeWidth' में बदलना होता है। इनलाइन स्टाइल्स को JavaScript ऑब्जेक्ट्स बनना चाहिए। कनवर्ज़न के बिना, React चेतावनियां या त्रुटियां देगा।
SVG को JSX में कैसे बदलें?
बस अपना SVG कोड इनपुट फ़ील्ड में पेस्ट करें या SVG फ़ाइल को ड्रैग और ड्रॉप करें। कनवर्टर स्वचालित रूप से इसे वैध JSX में बदल देगा। फिर आप आउटपुट को सीधे अपने React कंपोनेंट में कॉपी कर सकते हैं। वैकल्पिक रूप से, पूर्ण React कंपोनेंट जनरेट करने के लिए 'कंपोनेंट में रैप करें' सक्षम करें।
SVG ऑप्टिमाइज़ेशन क्या करता है?
SVG ऑप्टिमाइज़ेशन आपकी SVG फ़ाइलों से अनावश्यक डेटा हटाता है, जिसमें एडिटर मेटाडेटा (Illustrator, Figma या Sketch जैसे टूल्स से), XML डिक्लेरेशन, कमेंट्स और खाली एट्रिब्यूट्स शामिल हैं। यह SVG के दिखने पर प्रभाव डाले बिना फ़ाइल साइज़ कम करता है।
क्या मेरा SVG डेटा सुरक्षित है?
हां, बिल्कुल। यह टूल आपके ब्राउज़र में सब कुछ प्रोसेस करता है - आपका SVG कोड कभी आपके कंप्यूटर से बाहर नहीं जाता। कोई सर्वर अपलोड नहीं, कोई डेटा संग्रह नहीं, और कोई बाहरी API कॉल नहीं। यह इसे प्रोप्राइटरी आइकन्स और संवेदनशील डिज़ाइन एसेट्स के साथ उपयोग करने के लिए सुरक्षित बनाता है।
क्या मैं React Native के लिए SVG कनवर्ट कर सकता हूं?
हां! react-native-svg लाइब्रेरी के साथ संगत कोड जनरेट करने के लिए 'React Native' टैब चुनें। यह SVG टैग्स को उनके React Native समकक्षों में बदलता है (जैसे, 'svg' 'Svg' बन जाता है, 'path' 'Path' बन जाता है) और एट्रिब्यूट्स को तदनुसार समायोजित करता है।
क्या यह TypeScript को सपोर्ट करता है?
हां। TypeScript इंटरफ़ेस के साथ ठीक से टाइप किए गए React कंपोनेंट्स जनरेट करने के लिए 'TSX' टैब चुनें। जनरेट किए गए कंपोनेंट में उचित FC (Function Component) डिक्लेरेशन और prop टाइप्स शामिल होंगे।
कोड उदाहरण
// SVG to JSX attribute conversion
const svgAttrToJsx = {
'class': 'className',
'stroke-width': 'strokeWidth',
'fill-rule': 'fillRule',
'clip-path': 'clipPath',
};
// Convert hyphenated to camelCase
const toCamelCase = (str) =>
str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
// Example usage
const attr = 'stroke-width';
const jsxAttr = svgAttrToJsx[attr] || toCamelCase(attr);
console.log(jsxAttr); // 'strokeWidth'