SVG से React कंपोनेंट

SVG पेस्ट कीजिए, सीधे import करने लायक JSX या TSX कंपोनेंट पाइए।

या फ़ाइल छोड़िए / नीचे कोड पेस्ट कीजिए
React कंपोनेंट
आउटपुट यहाँ दिखेगा

यह कैसे काम करता है

  1. 1SVG कोड पेस्ट कीजिए या कोई .svg फ़ाइल छोड़िए।
  2. 2TypeScript आउटपुट चालू कीजिए और कंपोनेंट का नाम तय कीजिए।
  3. 3बना हुआ कंपोनेंट अपने कोडबेस में कॉपी कीजिए।

मुफ़्त, बिना साइनअप और बिना वॉटरमार्क — सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है, इसलिए फ़ाइलें कभी आपकी मशीन से बाहर नहीं जातीं।

अक्सर पूछे जाने वाले सवाल

इसमें क्या-क्या बदला जाता है?

एट्रिब्यूट camelCase में बदलते हैं (stroke-width → strokeWidth), class बनता है className, और बाकी props रूट पर फैला दिए जाते हैं ताकि आप आकार और रंग पास कर सकें।

क्या पहले SVG ऑप्टिमाइज़ करना चाहिए?

हाँ — पहले SVG ऑप्टिमाइज़र से गुज़ारिए, कंपोनेंट छोटा और साफ़ बनेगा। दोनों टूल एक क्लिक की दूरी पर हैं।

संबंधित टूल