इस टूल के बारे में
SVG से JSX Component टूल raw SVG markup को एक साफ़ React component में बदल देता है, जैसे SVGR करता है, पर पूरी तरह से आपके ब्राउज़र में कुछ भी अपलोड किए बिना। किसी design tool से export किया गया एक icon पेस्ट करें और एक component पाएँ जिसे आप import और style कर सकते हैं। यह SVG को DOMParser से पार्स करता है और markup विकृत होने पर एक स्पष्ट error रिपोर्ट करता है।
प्रत्येक hyphenated या namespaced SVG attribute को इसके React नाम पर camelCase किया जाता है — stroke-width को strokeWidth, fill-rule को fillRule, clip-path को clipPath, stop-color को stopColor, xlink:href को xlinkHref, xmlns:xlink को xmlnsXlink — जबकि data-* और aria-* attributes जैसे हैं वैसे छोड़े जाते हैं। Inline style strings style objects बन जाती हैं, path और circle जैसे खाली elements self-closed होते हैं, और props को root <svg {...props}> पर spread किया जाता है ताकि component configurable रहे। वैकल्पिक toggles आपको hard-coded fill और stroke मानों को currentColor से बदलने देते हैं (ताकि icon text color inherit करे), width और height को strip करने देते हैं ताकि यह अपने container के अनुसार scale हो, और component को forwardRef के साथ लपेटने देते हैं ताकि underlying <svg> node को expose किया जा सके।
JavaScript या TypeScript आउटपुट चुनें: TypeScript variant props को React.SVGProps<SVGSVGElement> के रूप में type करता है और, forwardRef सक्षम होने पर, forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>> का उपयोग करता है। component को एक exported arrow function (export const Icon = (props) => (...)) के रूप में निकाला जाता है, आपके चुने हुए नाम और indent के साथ, एक icon module में पेस्ट करने के लिए तैयार।