FlowingDev

React में SVG: स्टैटिक इमेज से डायनामिक कंपोनेंट तक

सीखें कि कैसे स्टैटिक SVG इमेज को डायनामिक, रियूजेबल React कंपोनेंट्स (JSX/TSX) में बदला जाता है जो props ले सकते हैं, रंग बदल सकते हैं, और भी बहुत कुछ कर सकते हैं।

टूल आज़माएँ: SVG से JSX

एक लाइन में

SVG से JSX आपकी वेक्टर इमेज के कोड को एक रियूजेबल React कंपोनेंट में बदल देता है, जिससे यह सिर्फ एक स्टैटिक फ़ाइल होने के बजाय डायनामिक और props के साथ कंट्रोल करने लायक बन जाती है।

यह क्या समस्या हल करता है

वेब के पुराने दिनों में (मतलब, कोई पाँच साल पहले), अगर आप कोई SVG आइकन दिखाना चाहते थे, तो आप शायद उसे बस एक <img> टैग में डाल देते थे: <img src="/icons/user.svg" alt="User profile" />। काम खत्म। शिप कर दो।

लेकिन यह सीधा-सादा तरीका एक तरह का जाल है। आपका SVG अब एक ब्लैक बॉक्स है। जब यूज़र इसके कंटेनिंग बटन पर होवर करे तो क्या आप इसका रंग बदलना चाहते हैं? तो भैया, मुश्किल है। ब्राउज़र इसे किसी दूसरी इमेज फ़ाइल (जैसे JPG, PNG) की तरह ही ट्रीट करता है, और आप CSS से इसके अंदरूनी हिस्सों को आसानी से स्टाइल नहीं कर सकते। क्या आप आइकन के अंदर के किसी पाथ को एनिमेट करना चाहते हैं? नहीं। क्या आप डार्क मोड थीम के लिए इसका रंग बदलना चाहते हैं? तो आपको एक पूरी नई फ़ाइल (user-white.svg) बनानी होगी और src को बदलने के लिए लॉजिक लिखना होगा। यह बहुत जल्दी सिरदर्द बन जाता है।

"आहा!" एक चालाक डेवलपर कहता है। "SVG तो बस XML मार्कअप है! मैं बस .svg फ़ाइल से कोड कॉपी करके अपने कंपोनेंट के रिटर्न स्टेटमेंट में पेस्ट कर दूँगा!"

// MyComponent.js
const MyComponent = () => (
  <div>
    <p>My Profile</p>
    {/* I just pasted this from a .svg file! */}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="black"/>
    </svg>
  </div>
);

इसे "इनलाइनिंग" (inlining) कहते हैं, और यह एक बहुत बड़ा सुधार है। अब SVG, DOM का हिस्सा है, और आप इसे CSS से स्टाइल कर सकते हैं। लेकिन आपने एक समस्या के बदले दूसरी समस्या खड़ी कर ली है।

  1. यह बोझिल है: SVG कोड का वह बड़ा सा हिस्सा आपके कंपोनेंट को पढ़ने में मुश्किल बना देता है। सोचिए अगर आपके कंपोनेंट में पाँच आइकन होते।
  2. यह रियूजेबल नहीं है: उस यूज़र आइकन की ज़रूरत कहीं और पड़ी? तो उस पूरे कोड को कॉपी-पेस्ट करने के लिए तैयार हो जाइए।
  3. यह JSX नहीं है: React की अपनी एक HTML की बोली है। stroke-width जैसे एट्रिब्यूट्स को strokeWidth की तरह camelCase में लिखना पड़ता है, और class बन जाता है className। इन्हें बदलना भूल जाने पर या तो कोई एरर नहीं आता या फिर कंसोल में चेतावनियाँ भर जाती हैं।

असली समाधान यह है कि आइकन्स को स्टैटिक एसेट्स की तरह नहीं, बल्कि अपने कंपोनेंट इकोसिस्टम का एक अहम हिस्सा माना जाए। आप <UserIcon color="blue" size={24} /> जैसा कुछ चाहते हैं। यही वह समस्या है जिसे SVG से JSX में बदलना हल करता है: यह रॉ SVG मार्कअप को एक साफ़, रियूजेबल, और प्रॉप-ड्रिवन React कंपोनेंट में बदलने के दोहराव वाले काम को ऑटोमेट कर देता है।

यह अंदर से कैसे काम करता है

टेक्स्ट के एक बड़े हिस्से को एक शानदार React कंपोनेंट में बदलना जादू जैसा लग सकता है, लेकिन यह एक predictable, स्टेप-बाय-स्टेप प्रक्रिया है। चलिए, पर्दे के पीछे झाँकते हैं।

स्टेप 1: SVG मार्कअप को पार्स करना

सबसे पहले, टूल को SVG को समझना होता है। चूँकि SVG, XML की एक बोली है, इसे एक HTML डॉक्यूमेंट की तरह ही नोड्स के ट्री स्ट्रक्चर में पार्स किया जा सकता है। हर एलिमेंट (<svg>, <path>, <g>, आदि) एक नोड बन जाता है, और इसके एट्रिब्यूट्स (width, fill, d, आदि) उस नोड की प्रॉपर्टीज़ बन जाते हैं।

तो, यह:

<svg width="24" height="24">
  <path fill-rule="evenodd" d="..." />
</svg>

पार्सर द्वारा एक ट्री के रूप में समझा जाता है:

  • svg नोड जिसके एट्रिब्यूट्स width="24" और height="24" हैं
    • path नोड जिसके एट्रिब्यूट्स fill-rule="evenodd" और d="..." हैं

स्टेप 2: एट्रिब्यूट्स को JSX-फाई करना

यह वह जगह है जहाँ React-स्पेसिफिक ट्रांसलेशन होता है। पार्सर नोड ट्री पर चलता है और एट्रिब्यूट्स को JSX-कम्पेटिबल बनाता है।

  • Camel-casing: हाइफ़न (kebab-case) वाले किसी भी एट्रिब्यूट को camelCase में बदल दिया जाता है। fill-rule बन जाता है fillRule, stroke-width बन जाता है strokeWidth।
  • कीवर्ड मैपिंग: रिज़र्व्ड JavaScript कीवर्ड्स को बदल दिया जाता है। सबसे आम है class, जो className बन जाता है।
  • स्टाइल एट्रिब्यूट्स: style="fill:red; stroke:blue" जैसा एट्रिब्यूट एक JavaScript ऑब्जेक्ट में बदल जाता है: style={{ fill: 'red', stroke: 'blue' }}।

तो, <path fill-rule="evenodd" class="icon-path"> JSX के बराबर में बदल जाता है: <path fillRule="evenodd" className="icon-path">।

स्टेप 3: एक कंपोनेंट में रैप करना

अब जब SVG ट्री धाराप्रवाह JSX बोल रहा है, अगला कदम इसे एक स्टैंडर्ड React फंक्शनल कंपोनेंट स्ट्रक्चर में लपेटना है। इसका सबसे सरल वर्ज़न कुछ ऐसा दिखता है:

import React from 'react';

const MyIcon = () => {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      {/* ... all the JSX-ified paths and other elements ... */}
    </svg>
  );
};

export default MyIcon;

यह आपको पहले से ही एक रियूजेबल <MyIcon /> कंपोनेंट देता है, जो एक बड़ी जीत है। लेकिन असली ताकत इसे डायनामिक बनाने में है।

स्टेप 4: Props और currentColor जोड़ना

यह असली मसाला है। एक अच्छा कनवर्टर SVG के मूल एट्रिब्यूट्स को हार्डकोड नहीं करता। यह उन्हें कॉन्फ़िगर करने लायक बनाता है।

  • Props को स्प्रेड करना: कंपोनेंट को props एक्सेप्ट करने और उन्हें रूट <svg> एलिमेंट पर फैलाने के लिए मॉडिफाई किया जाता है। यह अक्सर ...rest सिंटैक्स का उपयोग करके किया जाता है। अब आप कोई भी स्टैंडर्ड SVG एट्रिब्यूट (जैसे width, height, className, या aria-label) सीधे अपने कंपोनेंट को पास कर सकते हैं।

  • currentColor ट्रिक: यह स्टाइलिंग के लिए एक गेम-चेंजर है। कनवर्टर हार्डकोडेड fill और stroke एट्रिब्यूट्स (जैसे, fill="#000000") को ढूंढेगा और उन्हें स्पेशल CSS कीवर्ड currentColor से बदल देगा।

currentColor ब्राउज़र को बताता है, "इस एलिमेंट पर जो भी CSS color प्रॉपर्टी है, उसे fill/stroke के लिए इस्तेमाल करो।" इसका मतलब है कि आपका आइकन अब टेक्स्ट की तरह व्यवहार करता है। अगर आप अपने आइकन को एक div में लपेटते हैं और color: blue सेट करते हैं, तो आइकन नीला हो जाता है।

// The upgraded component
const MyIcon = ({ color = 'currentColor', size = 24, ...rest }) => {
  return (
    <svg 
      width={size} 
      height={size} 
      fill={color} // or applied directly to paths
      {...rest}
    >
      <path d="..." fill="currentColor" />
    </svg>
  );
};

स्टेप 5: Refs को फॉरवर्ड करना

कभी-कभी, आपको एक पैरेंट कंपोनेंट से असली <svg> DOM एलिमेंट का सीधा हैंडल चाहिए होता है, शायद उसकी पोज़िशन मापने के लिए या किसी थर्ड-पार्टी लाइब्रेरी के साथ उपयोग करने के लिए। एक सामान्य फंक्शनल कंपोनेंट अपने आंतरिक DOM स्ट्रक्चर को छुपाता है। इसका समाधान React.forwardRef है।

एक sofisticated कनवर्टर कंपोनेंट को React.forwardRef में लपेटेगा, जो पैरेंट से ref को सीधे underlying <svg> टैग तक पास करने के लिए एक रास्ता बनाता है।

अंतिम, प्रोडक्शन-ग्रेड कंपोनेंट अक्सर कुछ ऐसा दिखता है (TypeScript उदाहरण):

import * as React from 'react';

type Props = React.SVGProps<SVGSVGElement>;

const MyIcon = React.forwardRef<SVGSVGElement, Props>((props, ref) => (
  <svg ref={ref} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path d="..." fill="currentColor" />
  </svg>
));

MyIcon.displayName = 'MyIcon'; // Good for debugging
export default MyIcon;

असल दुनिया की कहानियाँ

थीमिंग का बुरा सपना

एक फ्रंटएंड टीम एक खूबसूरत वेब ऐप बना रही थी जिसमें लाइट और डार्क दोनों मोड थे। उन्होंने लगभग 50 आइकन इस्तेमाल किए, सभी <img src="/icons/whatever.svg"> के रूप में लागू किए गए थे। आइकन काले थे। जब उन्होंने डार्क मोड शिप किया, तो हड़कंप मच गया: सभी 50 काले आइकन नए डार्क बैकग्राउंड पर गायब हो गए। उनका पहला हड़बड़ी वाला "फिक्स" यह था कि उन्होंने सफेद आइकन्स का एक दूसरा सेट (whatever-dark.svg) एक्सपोर्ट किया और हर जगह भयानक कंडीशनल लॉजिक (isDarkMode ? 'whatever-dark.svg' : 'whatever.svg') लिखा। यह मेंटेनेंस का एक बुरा सपना था।

फिर, एक डेवलपर ने SVG-से-JSX वर्कफ़्लो पेश किया। उन्होंने एक स्क्रिप्ट चलाई जिसने सभी 50 SVG को React कंपोनेंट्स में बदल दिया, और खास तौर पर सभी fill="black" एट्रिब्यूट्स को fill="currentColor" से बदल दिया। उन्होंने सभी <img> टैग्स को अपने नए आइकन कंपोनेंट्स, जैसे <WhateverIcon /> से बदल दिया। तुरंत, आइकन्स ने अपना रंग पैरेंट टेक्स्ट के रंग से ले लिया, जो पहले से ही थीम के CSS द्वारा हैंडल किया जा रहा था। लाइट मोड: काला टेक्स्ट, काले आइकन। डार्क मोड: सफ़ेद टेक्स्ट, सफ़ेद आइकन। यह बस काम कर गया।

सबक: SVG को कंपोनेंट्स के रूप में इनलाइन करने से वे आपके ऐप के मौजूदा डिज़ाइन सिस्टम और स्टाइलिंग के साथ आसानी से इंटीग्रेट हो जाते हैं, जिससे आप एसेट-मैनेजमेंट के जहन्नुम से बच जाते हैं।

एनिमेटेड चेकमार्क

एक प्रोडक्ट मैनेजर एक "शानदार" एनीमेशन चाहता था: जब कोई यूज़र एक फ़ॉर्म पूरा करता है, तो स्क्रीन पर एक चेकमार्क खुद-ब-खुद बनना चाहिए। एनिमेटेड GIF का उपयोग करना संभव नहीं था—यह पिक्सलेटेड दिखता था और एक भारी फ़ाइल थी। डेवलपर ने एक लाइब्रेरी खोजने की कोशिश की, लेकिन कस्टम चेकमार्क डिज़ाइन के लिए कुछ भी ठीक से फिट नहीं हुआ।

मामले को अपने हाथों में लेते हुए, उसने डिज़ाइनर से स्टैटिक चेकमार्क SVG लिया और उसे एक JSX कंपोनेंट में बदल दिया। इससे उसे अपने React कोड के भीतर चेकमार्क के <path> एलिमेंट तक सीधी पहुँच मिल गई। उस पाथ के stroke-dasharray और stroke-dashoffset प्रॉपर्टीज़ पर एक साधारण CSS ट्रांज़िशन का उपयोग करके, वह ठीक वैसा ही "ड्राइंग" इफ़ेक्ट बनाने में सक्षम हुई जो वह चाहती थी। एनीमेशन एकदम मक्खन जैसा स्मूद था, अनंत रूप से स्केलेबल था, और 1KB से भी कम कोड लिया।

सबक: एक SVG को एक कंपोनेंट में बदलना उसके अलग-अलग हिस्सों पर बारीक कंट्रोल खोल देता है, जिससे जटिल CSS या JavaScript-ड्रिवन एनीमेशन संभव हो जाते हैं।

आम गलतियाँ और जाल

  • एक्सेसिबिलिटी को भूल जाना। एक आइकन जो कोई मतलब बताता है (जैसे "close" X) सिर्फ़ सजावट नहीं है। यदि आप कनवर्ज़न के दौरान <title> टैग को हटा देते हैं, तो एक स्क्रीन रीडर इसे "ग्रुप" के रूप में घोषित कर सकता है या बस इसे अनदेखा कर सकता है। हमेशा सुनिश्चित करें कि आपके अंतिम कंपोनेंट में एक उपयुक्त aria-label प्रॉप हो या SVG के अंदर <title> एलिमेंट के माध्यम से एक एक्सेसिबल नाम हो। एक अच्छा कंपोनेंट <svg role="img" ...> के रूप में रेंडर होगा।
  • बंडल को फुला देना। SVGs को इनलाइन करने का मतलब है कि उनका कोड अब आपके JavaScript बंडल का हिस्सा है। कुछ दर्जन छोटे UI आइकन्स के लिए, यह एक शुद्ध जीत है (कम HTTP रिक्वेस्ट्स)। लेकिन अगर आप हज़ारों पाथ वाली एक बड़ी, जटिल इलस्ट्रेशन को इनलाइन करने की कोशिश करते हैं, तो आप अपने बंडल साइज़ को गंभीर रूप से फुला सकते हैं और इनिशियल पेज लोड को धीमा कर सकते हैं। बड़ी, स्टैटिक इलस्ट्रेशन्स के लिए, <img> अभी भी एक बिल्कुल सही विकल्प है।
  • पहले ऑप्टिमाइज़ेशन को नज़रअंदाज़ करना। Figma या Adobe Illustrator जैसे डिज़ाइन टूल से एक्सपोर्ट किए गए SVG कुख्यात रूप से गंदे होते हैं। उनमें एडिटर मेटाडेटा, कमेंट्स, छिपी हुई लेयर्स, और अत्यधिक सटीक दशमलव मान होते हैं। इसे सीधे JSX कंपोनेंट में डालना फूले हुए, मुश्किल से पढ़े जाने वाले कोड में परिणत होता है। हमेशा अपने SVG को बदलने से पहले SVGO जैसे ऑप्टिमाइज़र से गुजारें। यह अक्सर कोड के आकार को 50% या उससे अधिक कम कर सकता है।
  • मैनुअल एडिटिंग एक सिंक समस्या बन जाती है। आप icon.svg को Icon.jsx में बदलते हैं। फिर आप एक फ़ीचर जोड़ने के लिए Icon.jsx को मैन्युअल रूप से ट्विक करते हैं। एक हफ़्ते बाद, डिज़ाइनर आपको एक अपडेटेड icon.svg देता है। अब आपके पास एक विकल्प है: कनवर्ज़न को फिर से चलाएं और अपने मैन्युअल एडिट्स खो दें, या नए डिज़ाइन को अपने एडिटेड JSX में मैन्युअल रूप से पैच करने का प्रयास करें। सत्य का स्रोत (source of truth) .svg फ़ाइल होनी चाहिए; JSX में कनवर्ज़न एक दोहराने योग्य, स्वचालित स्क्रिप्ट होनी चाहिए।

यह आपके रडार पर क्यों होना चाहिए

जब भी आप एक कंपोनेंट-आधारित वेब एप्लीकेशन (जैसे React, Preact, आदि) बना रहे हों और आपके आइकन्स को सिर्फ़ स्टैटिक तस्वीरों से ज़्यादा कुछ होने की ज़रूरत हो, तो आपको SVG को JSX में बदलने के बारे में सोचना चाहिए।

यह काम के लिए सही टूल है जब:

  • आपको आइकन्स का रंग, आकार, या स्ट्रोक की चौड़ाई स्टेट या प्रॉप्स के आधार पर बदलने की आवश्यकता हो।
  • आप एक डिज़ाइन सिस्टम या कंपोनेंट लाइब्रेरी बना रहे हैं और आइकन्स को प्रबंधित करने के लिए एक स्केलेबल, सुसंगत तरीके की आवश्यकता है।
  • आप एक आइकन के कुछ हिस्सों को एनिमेट करना चाहते हैं।
  • आप परफॉरमेंस के लिए ऑप्टिमाइज़ कर रहे हैं और क्रिटिकल आइकन्स को इनलाइन करके नेटवर्क रिक्वेस्ट की संख्या कम करना चाहते हैं।

आधुनिक फ्रंटएंड डेवलपमेंट में, अपने आइकन्स को कंपोनेंट्स के रूप में मानना कोई हैक नहीं है—यह डायनामिक, मेंटेनेबल, और हाई-परफॉरमेंस यूज़र इंटरफ़ेस बनाने का स्टैंडर्ड है।

और गहराई में जाएं

  • MDN: SVG: Scalable Vector Graphics — ब्राउज़र में SVG कैसे काम करता है, इसके लिए अंतिम गाइड।
  • W3C: Scalable Vector Graphics (SVG) 2 Specification — आधिकारिक स्पेक। घना, लेकिन सत्य का अंतिम स्रोत।
  • React Docs: Forwarding Refs — कंपोनेंट कंपोज़िशन के लिए इस आवश्यक तकनीक पर आधिकारिक डॉक्यूमेंटेशन।
  • MDN: currentColor — वह सरल लेकिन शक्तिशाली CSS मान जो SVG थीमिंग को आसान बना देता है।
  • CSS-Tricks: Styling SVG — CSS के साथ SVGs को मैनिपुलेट और स्टाइल करने के कई तरीकों पर लेखों का एक शानदार संग्रह।
  • SVGO (SVG Optimizer) — SVG फ़ाइलों को साफ़ करने के लिए इंडस्ट्री-स्टैंडर्ड टूल। यह समझना कि यह क्या करता है, आपको यह सराहने में मदद करेगा कि एक साफ़ SVG कंपोनेंट में क्या जाता है।

थ्योरी हो गई। अब हाथ आज़माइए — 100% आपके ब्राउज़र में।

टूल आज़माएँ: SVG से JSX