React.js एप्लिकेशन बनाते समय, SVG आइकन को कुशलतापूर्वक प्रबंधित करना महत्वपूर्ण है। एसवीजी उत्तरदायी डिजाइन के लिए आवश्यक स्केलेबिलिटी और लचीलापन प्रदान करते हैं, लेकिन बड़ी परियोजनाओं में उन्हें संभालना बोझिल हो सकता है। यहीं पर svg-path-constant आता है, एक CLI टूल जिसे SVG पथों को पुन: प्रयोज्य स्थिरांकों में परिवर्तित करके आपके SVG वर्कफ़्लो को सुव्यवस्थित करने के लिए डिज़ाइन किया गया है।

एसवीजी क्यों और स्थिरांक क्यों?

पिछले लेख, "रिएक्ट.जेएस प्रोजेक्ट्स में एसवीजी आइकन प्रबंधन विकल्पों की एक व्यापक तुलना" में, मैंने एसवीजी आइकन को प्रबंधित करने के लिए विभिन्न तरीकों पर चर्चा की, जिसमें इनलाइन एसवीजी, एसवीजी स्प्राइट और प्रत्येक आइकन के लिए रिएक्ट घटकों का उपयोग शामिल है। जबकि प्रत्येक विधि के अपने फायदे और नुकसान हैं, एक चुनौती बनी हुई है: अपने एसवीजी पथों को व्यवस्थित और पुन: प्रयोज्य बनाए रखना।

एसवीजी पथों के लिए स्थिरांक का उपयोग छोटे बंडल आकार और तेज़ निर्माण समय प्रदान करता है।

एसवीजी-पथ-स्थिरांक क्या है?

svg-path-constants एक CLI उपकरण है जो आपको SVG फ़ाइलों से स्थिरांक उत्पन्न करने में मदद करता है, जिससे आपके रिएक्ट प्रोजेक्ट्स में SVG आइकन को एकीकृत और प्रबंधित करना आसान हो जाता है। यह एसवीजी पथों को जेएस स्थिरांक में परिवर्तित करता है, लचीले नामकरण सम्मेलनों का समर्थन करता है, और अनुकूलन योग्य आउटपुट की अनुमति देता है।

प्रमुख विशेषताऐं:

• एसवीजी फ़ाइलों से स्थिरांक उत्पन्न करें: एसवीजी पथों को त्वरित रूप से स्थिरांक में परिवर्तित करें।
• लचीली नामकरण परंपराएं: कैमलकेस, पास्कलकेस, स्नेक_केस और SCREAMING_SNAKE_CASE का समर्थन करता है।
• अनुकूलन योग्य आउटपुट: कस्टम टेम्पलेट और फ़ाइल पथ के साथ स्थिरांक उत्पन्न करें।
• विशेषता रूपांतरण: अपारदर्शिता, भरण-अपारदर्शिता, स्ट्रोक और पथ स्ट्रिंग में भरने जैसी एसवीजी विशेषताओं को स्वचालित रूप से परिवर्तित करता है।
• एकल या एकाधिक आउटपुट: अपनी इनपुट संरचना के आधार पर एक एकल आउटपुट फ़ाइल या एकाधिक फ़ाइलें जेनरेट करें।

Svg-पथ-स्थिरांक के साथ आरंभ करना

आप एनपीएक्स के साथ तुरंत एसवीजी-पथ-स्थिरांक का उपयोग शुरू कर सकते हैं:

npx svg-path-constants@latest

वैकल्पिक रूप से, आप इसे विश्व स्तर पर या एक देव निर्भरता के रूप में स्थापित कर सकते हैं:

npm install -g svg-path-constants
npm install --save-dev svg-path-constants

उदाहरण उपयोग

बुनियादी उपयोग

मान लें कि आपके पास src/assets/icons में SVG फ़ाइलें हैं और आप src/components/Icon/paths.js में स्थिरांक उत्पन्न करना चाहते हैं:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

आउटपुट उदाहरण:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

कस्टम नामकरण प्रारूप

एक अलग नामकरण प्रारूप निर्दिष्ट करें, जैसे पास्कलकेस:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js -f PascalCase

आउटपुट उदाहरण:

// src/components/Icon/paths.js
export const FolderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const FolderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

आउटपुट के लिए टेम्पलेट का उपयोग करना

एक कस्टम टेम्पलेट के साथ नामकरण और फ़ाइल आउटपुट को नियंत्रित करें:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/{-2,-1}/{0}.js -t "{1,-3}"

आउटपुट उदाहरण:

// src/components/Icon/folder/icon1.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path

// src/components/Icon/folder/icon2.js
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

एसवीजी विशेषताओं को संभालना

svg-path-constant अपारदर्शिता, भरण-अस्पष्टता, स्ट्रोक जैसी SVG विशेषताओं को परिवर्तित कर सकते हैं और पथ स्ट्रिंग के घटकों में भर सकते हैं।

उदाहरण एसवीजी:

उत्पन्न पथ स्थिरांक:

export const myIcon = "o0.5 O0.8 fff000 F00ff00 M10 10 H 90 V 90 H 10 Z";

• opacity='0.5' o0.5 हो जाता है
• fill-opacity='0.8' O0.8 हो जाता है
• स्ट्रोक = "#ff0000" fff000 बन जाता है
• fill='#00ff00' F00ff00 बन जाता है

यह सुविधा आपको एक संक्षिप्त और सूचनात्मक प्रतिनिधित्व बनाए रखते हुए आवश्यक शैली की जानकारी को सीधे पथ स्ट्रिंग के भीतर रखने की अनुमति देती है।

उदाहरण: एक प्रतिक्रिया घटक में एसवीजी पथ स्थिरांक का उपयोग करना

एक बार जब आप एसवीजी-पथ-स्थिरांक के साथ एसवीजी पथ स्थिरांक उत्पन्न कर लेते हैं, तो आप उन्हें आसानी से अपने रिएक्ट घटकों में एकीकृत कर सकते हैं। यह न केवल आपके कोड को साफ रखता है बल्कि आपके एप्लिकेशन में एसवीजी पथों के आसान पुन: उपयोग की अनुमति भी देता है।

चरण 1: एसवीजी पथ स्थिरांक उत्पन्न करें

मान लें कि आपने अपनी एसवीजी फ़ाइलों से स्थिरांक उत्पन्न करने के लिए निम्नलिखित कमांड पहले ही चला ली है:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

यह कमांड निम्न जैसे स्थिरांक के साथ एक फ़ाइल src/components/Icon/paths.js उत्पन्न करता है:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

चरण 2: एसवीजी रेंडर करने के लिए एक रिएक्ट कंपोनेंट बनाएं

अब, एक रिएक्ट घटक बनाएं जो उत्पन्न स्थिरांक का उपयोग करके इन एसवीजी आइकन को प्रस्तुत करता है।

import React from 'react';
import { folderIcon1, folderIcon2 } from './paths'; // Import the generated SVG path constants

const parsePathData = (d) => {
    const pathElements = [];
    const pathCommands = d.split(/(o[\d.] |O[\d.] |f[0-9a-fA-F] |F[0-9a-fA-F] )/); // Split by style commands
    let attributes = null;

    pathCommands.forEach((text, i) => {
        const isCommand = Boolean(i % 2);
        if (isCommand) {
            if (!attributes) {
                attributes = {};
            }
            const match = text.match(/^(o([\d.] ))?(O([\d.] ))?(f([0-9a-fA-F] ))?(F([0-9a-fA-F] ))?$/);

            const [, , opacity, , fillOpacity, , stroke, , fill] = match;
            if (opacity) attributes.opacity = opacity;
            if (fillOpacity) attributes["fill-opacity"] = fillOpacity;
            if (stroke) attributes.stroke = `#${stroke}`;
            if (fill) attributes.fill = `#${fill}`;
            return;
        }
        if (text.trim().length) {
            pathElements.push({ ...attributes, d: text });
        }
    });

    return pathElements;
};


const SvgIcon = ({ d, size = 24, color = 'currentColor', ...props }) => {
    const pathElements = parsePathData(d);

    return (
        
    );
};

const IconDemo = () => (
    

        
SVG Icon Examples
        

            
Folder Icon 1
            
        
        

            
Folder Icon 2
            
        
    
);

export default IconDemo;

चरण 3: अपने एप्लिकेशन में घटक का उपयोग करें

अब आप एसवीजी आइकन प्रदर्शित करने के लिए अपने रिएक्ट एप्लिकेशन में कहीं भी IconDemo घटक का उपयोग कर सकते हैं:

import React from 'react';
import ReactDOM from 'react-dom';
import IconDemo from './components/Icon/IconDemo';

ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

स्पष्टीकरण:

1. parsePathData फ़ंक्शन:

   • यह केवल तभी आवश्यक है जब आपके पास एसवीजी फ़ाइल में अस्पष्टता या एकाधिक रंग हों।
   • parsePathData फ़ंक्शन विस्तारित डी विशेषता स्ट्रिंग को संसाधित करता है, ओ (अपारदर्शिता), एफ (रंग भरें), और एफ (स्ट्रोक रंग) जैसे कमांड निकालता है।
   • यह इन आदेशों के आधार पर स्ट्रिंग को विभाजित करता है, संबंधित विशेषताओं को लागू करता है, और पथ तत्वों की एक सरणी लौटाता है।

2. SvgIcon घटक:

   • यह घटक एक डी विशेषता स्ट्रिंग लेता है, इसे पार्सपाथडेटा के साथ पार्स करता है, और एसवीजी पथ प्रस्तुत करता है।
   • घटक आकार और रंग जैसे प्रॉप्स के माध्यम से अनुकूलन की अनुमति देता है।

3. IconDemo घटक:

   • यह एक डेमो घटक है जो दिखाता है कि विभिन्न डी स्ट्रिंग्स, आकार और रंगों के साथ SvgIcon घटक का उपयोग कैसे करें।

आगे क्या होगा? स्थिरांक में रेखापुंज छवियाँ जोड़ना

मैं वर्तमान में एक एनपीएम लाइब्रेरी पर काम कर रहा हूं जो प्रत्येक उत्पन्न स्थिरांक के ऊपर टिप्पणियों के रूप में रेखापुंज छवियों (पीएनजी) को जोड़कर एसवीजी-पथ-स्थिरांक को बढ़ाएगा। यह सीधे आपके कोड में आइकन का एक दृश्य प्रतिनिधित्व प्रदान करेगा, जिससे एसवीजी पथों को पहचानना और प्रबंधित करना आसान हो जाएगा।

निष्कर्ष

रिएक्ट परियोजनाओं में एसवीजी पथों को प्रबंधित करना कोई परेशानी की बात नहीं है। एसवीजी-पथ-स्थिरांक के साथ, आप अपने आइकन को व्यवस्थित, अपने कोड को साफ और अपने वर्कफ़्लो को कुशल रख सकते हैं। और जल्द ही, आइकन टिप्पणियों में रेखापुंज छवियां जोड़ने के लिए आगामी लाइब्रेरी के साथ, आपके पास अपनी एसवीजी संपत्तियों को प्रबंधित करने का और भी अधिक दृश्य और सहज तरीका होगा।

एसवीजी-पथ-स्थिरांक आज ही आज़माएं:

npx svg-path-constants@latest

और अधिक अपडेट के लिए बने रहें!