SVG से React कॉम्पोनेंट
SVG मार्कअप पेस्ट करें और camelCase एट्रिब्यूट्स के साथ इम्पोर्ट के लिए तैयार React फंक्शनल कॉम्पोनेंट पाएं।
यह कैसे काम करता है
SVG को ब्राउज़र के अपने DOM पार्सर से पार्स किया जाता है, इसलिए इसे असल में मार्कअप के
रूप में समझा जाता है, सिर्फ़ पैटर्न-मैच नहीं किया जाता। हर एट्रिब्यूट नाम को उसके
React/DOM समकक्ष में बदला जाता है, ठीक उसी मैपिंग का उपयोग करते हुए जो React खुद अंदरूनी
तौर पर इस्तेमाल करता है (stroke-width
→ strokeWidth, class → className,
xlink:href → xlinkHref, वगैरह), ट्री को फिर से JSX के रूप
में सीरियलाइज़ किया जाता है, और इसे एक छोटे फंक्शनल कॉम्पोनेंट में लपेट दिया जाता है।
"props स्वीकार करें" चालू होने पर, {...props} को रूट एलिमेंट पर स्प्रेड कर
दिया जाता है ताकि कॉल करने वाले सामान्य React तरीक़े से width,
className, या onClick हैंडलर पास कर सकें।
पार्सिंग और कन्वर्ज़न पूरी तरह इस पेज की जावास्क्रिप्ट में, उस DOM पर होते हैं जिसे ब्राउज़र आपके इनपुट से बनाता है। कुछ भी अपलोड नहीं होता।
अक्सर पूछे जाने वाले सवाल
SVG और JSX के बीच क्या बदलता है?
एट्रिब्यूट नाम camelCase में बदल जाते हैं (stroke-width, strokeWidth बन जाता है, fill-rule, fillRule बन जाता है), class, className बन जाता है, और सेल्फ़-क्लोज़िंग टैग्स को वह ट्रेलिंग स्लैश मिल जाता है जो JSX को चाहिए होता है। विज़ुअल आउटपुट बिल्कुल वही रहता है।
क्या मैं props से साइज़ और कलर कंट्रोल कर सकता हूँ?
"props स्वीकार करें" चालू करें ताकि कॉम्पोनेंट {...props} को रूट <svg> एलिमेंट पर स्प्रेड करे, जिससे आप width, height, className या कुछ भी जहां चाहें वहां से ओवरराइड कर सकें, यह आइकन कॉम्पोनेंट्स का स्टैंडर्ड पैटर्न है।
क्या यह मेरा SVG कहीं भेजता है?
नहीं। यह कन्वर्ज़न आपके ब्राउज़र में की गई एक सामान्य स्ट्रिंग/एट्रिब्यूट ट्रांसफ़ॉर्मेशन है। कुछ भी अपलोड नहीं होता।