SVG को React कॉम्पोनेंट में बदलें
SVG पेस्ट करें और इस्तेमाल के लिए तैयार React कॉम्पोनेंट (.tsx) पाएँ, जिसमें सभी एट्रिब्यूट camelCase में बदले होते हैं (className, strokeWidth...) और props प्रॉप आगे भेजा जाता है।
यह कन्वर्ज़न ठीक-ठीक क्या करता है?
JSX (जिसे React इस्तेमाल करता है) stroke-width या class जैसे kebab-case HTML/SVG एट्रिब्यूट स्वीकार नहीं करता: उन्हें camelCase में लिखना पड़ता है (strokeWidth, className)। यह टूल SVG के सभी एट्रिब्यूट इसी नियम के अनुसार अपने-आप दोबारा लिख देता है और नतीजे को TypeScript फ़ंक्शन कॉम्पोनेंट में लपेट देता है, जिसे सीधे React प्रोजेक्ट में कॉपी किया जा सकता है।
क्या बनाया गया कॉम्पोनेंट कस्टम props (रंग, आकार) स्वीकार करता है?
हाँ, कॉम्पोनेंट मिलने वाले सभी props ({...props}) को सीधे <svg> टैग पर आगे भेज देता है, इसलिए आप पैरेंट कॉम्पोनेंट से className, width, height, onClick आदि उसी तरह दे सकते हैं जैसे किसी भी SVG एलिमेंट पर।
क्या कॉम्पोनेंट सादे JavaScript (TypeScript के बिना) में भी चलता है?
बनाई गई फ़ाइल TypeScript में है (props की टाइपिंग के साथ), लेकिन टाइप की import लाइन और : SVGProps<SVGSVGElement> एनोटेशन हटा देने से इसे सामान्य JavaScript प्रोजेक्ट में सीधे इस्तेमाल किया जा सकता है।
100% लोकल प्रोसेसिंग: कॉम्पोनेंट का निर्माण पूरी तरह आपके ब्राउज़र में होता है, आपका SVG कभी किसी सर्वर पर नहीं भेजा जाता।