SVG to JSX
Convert SVG markup into clean React JSX or TSX components
यहाँ .svg फ़ाइल छोड़ें
5 MB तक की SVG फ़ाइलें।
आप क्लिपबोर्ड से पेस्ट भी कर सकते हैं।
PascalCase, उदाहरण के लिए ArrowRightIcon।
अधिक विकल्प
एलिमेंट्स के बीच की टिप्पणियाँ और केवल खाली जगह वाला टेक्स्ट हटाता है। यह सुरक्षित सफ़ाई है, पूर्ण SVG ऑप्टिमाइज़र नहीं।
सजावटी आइकन के लिए बंद करें: title, desc, role और ARIA एट्रिब्यूट हटते हैं और aria-hidden जुड़ता है।
रूट title को बदलता है और role="img" जोड़ता है।
पूर्वावलोकन देखने के लिए SVG मार्कअप पेस्ट करें या फ़ाइल अपलोड करें।
SVG to JSX क्या करता है
SVG to JSX, SVG मार्कअप को React कंपोनेंट या साधारण JSX एलिमेंट में बदलता है। एट्रिब्यूट उनके React नामों में बदले जाते हैं (class → className, stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, xlink:href → xlinkHref), इनलाइन style स्ट्रिंग style ऑब्जेक्ट बनती हैं, और viewBox हमेशा सुरक्षित रहता है ताकि आइकन सही ढंग से स्केल हो।
उपयोग कैसे करें
- 1.SVG मार्कअप पेस्ट करें, .svg फ़ाइल छोड़ें या चुनें, या उदाहरण लोड करें।
- 2.सुरक्षित पूर्वावलोकन और हटाए गए असुरक्षित आइटम की सूची देखें।
- 3.कंपोनेंट का नाम सेट करें और JSX या TSX आउटपुट चुनें।
- 4.ज़रूरत के अनुसार रैपर, props फैलाना, width/height हटाना और currentColor चालू करें।
- 5.कोड कॉपी करें या .jsx या .tsx फ़ाइल के रूप में डाउनलोड करें।
विकल्पों की जानकारी
Props फैलाने से className, आकार और इवेंट props कंपोनेंट से रूट <svg> तक पहुँचते हैं; TSX में SVGProps<SVGSVGElement> टाइप जुड़ता है। width और height हटाने पर CSS, viewBox के ज़रिए आकार नियंत्रित करता है। currentColor ठोस fill और stroke रंगों को बदलता है ताकि आइकन टेक्स्ट का रंग ले; none, transparent, ग्रेडिएंट (url(...)) और CSS वेरिएबल नहीं बदलते। खाली जगह साफ़ करना एलिमेंट्स के बीच की टिप्पणियाँ और केवल खाली जगह वाला टेक्स्ट हटाता है; यह सुरक्षित सफ़ाई है, पूर्ण SVG ऑप्टिमाइज़र नहीं। सजावटी आइकन के लिए एक्सेसिबिलिटी एट्रिब्यूट बंद करें ताकि title, desc, role और ARIA हटें और aria-hidden जुड़े, या अर्थपूर्ण आइकन के लिए शीर्षक लिखें जिससे role="img" जुड़ता है।
सुरक्षा और सीमाएँ
हर इनपुट पूर्वावलोकन और रूपांतरण से पहले सुरक्षित किया जाता है: <script>, <foreignObject>, onclick जैसे इवेंट हैंडलर, javascript: URL, बाहरी इमेज या संसाधन संदर्भ और असमर्थित एलिमेंट हटाकर बताए जाते हैं। DOCTYPE घोषणाएँ और XML entities अस्वीकार की जाती हैं। पूर्वावलोकन केवल सुरक्षित मार्कअप को इमेज के रूप में दिखाता है, इसलिए SVG का कुछ भी चल नहीं सकता। SVG टेक्स्ट की सीमा 5 MB है। असमर्थित एलिमेंट हटने के कारण जटिल चित्रों में पूर्वावलोकन की तुलना मूल फ़ाइल से करें।
