डेवलपर टूल / 26
SVG से React JSX / TSX कन्वर्टर
SVG वेक्टर मार्कअप को साफ़-सुथरे, घटक-आधारित React JSX या TypeScript TSX कोड में बदलें।
SVG से React JSX / TSX कन्वर्टर: TOEA SVG के kebab-case एट्रिब्यूट को React camelCase में बदलता है, inline styles को JS ऑब्जेक्ट में बदलता है और SVG एलिमेंट को रैप करता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।
- श्रेणी
- डेवलपर टूल्स
- रन
- आपके ब्राउज़र में
- लागत
- मुफ़्त · साइन अप की ज़रूरत नहीं
- उपलब्धता
- इस्तेमाल के लिए तैयार
आइकन को टेक्स्ट की तरह व्यवहार कराना
आइकन कंपोनेंट को दोबारा इस्तेमाल करना तब सबसे आसान होता है, जब वह अपना रंग और आकार उस जगह से ले जहाँ उसे रखा गया है। हार्ड-कोड किए गए fill या stroke रंगों को currentColor से बदलें, ताकि आइकन आसपास के टेक्स्ट का रंग अपनाए। viewBox रखते हुए width और height हटा दें, ताकि CSS या className आकार तय करे। फ़ाइल को पहले SVG क्लीनर से चलाने पर एडिटर का मेटाडेटा हट जाता है, जो अन्यथा आपके bundle में चला जाता।
IDs, स्टाइल और एक्सेसिबिलिटी
ग्रेडिएंट, मास्क और क्लिप पाथ का संदर्भ id से दिया जाता है। उसी कंपोनेंट को दो बार रेंडर करने पर पेज में डुप्लिकेट IDs बन जाती हैं, इसलिए दूसरी कॉपी पहले वाले ग्रेडिएंट की ओर संकेत कर सकती है। जब आइकन इनका इस्तेमाल करे, तो React के useId से विशिष्ट IDs बनाएँ।
SVG के अंदर मौजूद <style> एलिमेंट JSX को बिगाड़ देता है, क्योंकि उसके कर्ली ब्रेसेज़ को expressions के रूप में पढ़ा जाता है। उन नियमों को attributes या stylesheet में ले जाएँ। सजावटी आइकन के लिए aria-hidden="true" जोड़ें; अर्थ बताने वाले आइकन के लिए role="img" और <title> जोड़ें।
इस्तेमाल करने का तरीका
- कच्चा SVG मार्कअप पेस्ट करें।
- घटक का नाम, TypeScript इंटरफ़ेस और प्रॉप्स फ़ॉरवर्डिंग कॉन्फ़िगर करें।
- तुरंत इस्तेमाल करने योग्य React घटक कोड कॉपी करें।
गोपनीयता और सीमाएँ
मार्कअप का रूपांतरण पूरी तरह client-side JavaScript के अंदर किया जाता है।
संबंधित टूल्स
अक्सर पूछे जाने वाले सवाल
क्या यह TypeScript को सपोर्ट करता है?
हाँ, यह पूरी तरह टाइप किए गए React.FC<React.SVGProps<SVGSVGElement>> घटक जनरेट करता है।
मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं