डेवलपर्स अक्सर SVG को सीधे JSX में सम्मिलित करते हैं। इसका उपयोग करना सुविधाजनक है, लेकिन यह JS बंडल आकार को बढ़ाता है। अनुकूलन की खोज में, मैंने बंडल को अव्यवस्थित किए बिना एसवीजी आइकन का उपयोग करने का एक और तरीका खोजने का फैसला किया। हम एसवीजी स्प्राइट्स के बारे में बात करेंगे, वे क्या हैं, उनका उपयोग कैसे करें और उनके साथ काम करने के लिए कौन से उपकरण उपलब्ध हैं। सिद्धांत से शुरू करके, हम एक स्क्रिप्ट लिखेंगे जो चरण दर चरण एक एसवीजी स्प्राइट उत्पन्न करती है और और के लिए प्लगइन्स पर चर्चा करके समाप्त होगी। वाइट वेबपैक एसवीजी स्प्राइट क्या है? एक इमेज स्प्राइट एक ही छवि में रखी गई छवियों का एक संग्रह है। बदले में, एसवीजी स्प्राइट एसवीजी सामग्री का एक संग्रह है, जिसे में लपेटा गया है, जिसे में रखा गया है। <symbol /> <svg /> उदाहरण के लिए, हमारे पास एक सरल एसवीजी पेन आइकन है: एसवीजी स्प्राइट प्राप्त करने के लिए, हम टैग को से बदल देंगे, और इसे बाहरी रूप से से लपेट देंगे: <svg /> <symbol /> <svg /> अब यह एक एसवीजी स्प्राइट है, और हमारे अंदर वाला एक आइकन है। id="icon-pen" ठीक है, लेकिन हमें यह पता लगाना चाहिए कि इस आइकन को अपने HTML पेज पर कैसे रखा जाए। हम आइकन की आईडी निर्दिष्ट करते हुए विशेषता के साथ टैग का उपयोग करेंगे, और यह SVG के अंदर इस तत्व की नकल करेगा। href <use /> आइए एक उदाहरण देखें कि कैसे काम करता है: <use /> इस उदाहरण में, दो वृत्त हैं। पहले वाले की रूपरेखा नीली है, और दूसरा पहले वाले का डुप्लिकेट है लेकिन लाल रंग से भरा हुआ है। आइए अपने एसवीजी स्प्राइट पर वापस आएं। के उपयोग के साथ, हमें यह मिलेगा: <use /> यहां, हमारे पास पेन आइकन वाला एक बटन है। अब तक, हमने में बिना कोड वाले आइकन का उपयोग किया है। यदि हमारे पास पृष्ठ पर एक से अधिक बटन हैं, तो यह हमारे HTML लेआउट के आकार को एक से अधिक बार प्रभावित नहीं करेगा क्योंकि सभी आइकन हमारे एसवीजी स्प्राइट से आएंगे और पुन: प्रयोज्य होंगे। <button /> एसवीजी स्प्राइट फ़ाइल बनाना आइए अपने SVG स्प्राइट को एक अलग फ़ाइल में ले जाएँ ताकि हमें फ़ाइल को अव्यवस्थित न करना पड़े। सबसे पहले, एक फ़ाइल बनाएं और उसमें एक SVG स्प्राइट डालें। अगला कदम में विशेषता का उपयोग करके आइकन तक पहुंच प्रदान करना है: index.html sprite.svg <use/> href एसवीजी स्प्राइट निर्माण को स्वचालित करना आइकन के उपयोग पर बहुत सारा समय बचाने के लिए, आइए इस प्रक्रिया के लिए एक स्वचालन स्थापित करें। आइकनों तक आसान पहुंच पाने और उन्हें अपनी इच्छानुसार प्रबंधित करने के लिए, उन्हें अलग करना होगा, प्रत्येक को अपनी फ़ाइल में। सबसे पहले, हमें सभी आइकन को एक ही फ़ोल्डर में रखना चाहिए, उदाहरण के लिए: अब, चलिए एक स्क्रिप्ट लिखते हैं जो इन फ़ाइलों को पकड़ती है और उन्हें एक एकल एसवीजी स्प्राइट में जोड़ती है। अपने प्रोजेक्ट की रूट डायरेक्टरी में फ़ाइल बनाएं। generateSvgSprite.ts लाइब्रेरी स्थापित करें: ग्लोब npm i -D glob का उपयोग करके प्रत्येक आइकन के लिए पूर्ण पथों की एक सरणी प्राप्त करें: globSync अब, हम प्रत्येक फ़ाइल पथ को पुनरावृत्त करेंगे और नोड की अंतर्निहित लाइब्रेरी का उपयोग करके फ़ाइल सामग्री प्राप्त करेंगे: fs बढ़िया, हमारे पास प्रत्येक आइकन का एसवीजी कोड है, और अब हम उन्हें जोड़ सकते हैं, लेकिन हमें प्रत्येक आइकन के अंदर टैग को टैग से बदलना चाहिए और बेकार एसवीजी विशेषताओं को हटा देना चाहिए। svg symbol हमें अपने एसवीजी कोड को उसका DOM प्रतिनिधित्व प्राप्त करने के लिए कुछ HTML पार्सर लाइब्रेरी के साथ पार्स करना चाहिए। मैं उपयोग करूंगा: नोड-एचटीएमएल-पार्सर का हमने एसवीजी कोड को पार्स किया है और एसवीजी तत्व प्राप्त किया है जैसे कि यह एक वास्तविक HTML तत्व था। उसी पार्सर का उपयोग करके, के बच्चों को में ले जाने के लिए एक खाली तत्व बनाएं: svgElement symbol symbol से बच्चों को निकालने के बाद, हमें इससे और विशेषताएँ भी प्राप्त करनी चाहिए। एक के रूप में, आइए आइकन फ़ाइल का नाम सेट करें। svgElement id viewBox id अब, हमारे पास एक तत्व है जिसे एसवीजी स्प्राइट में रखा जा सकता है। तो, फ़ाइलों को पुनरावृत्त करने से पहले बस वेरिएबल को परिभाषित करें, एक स्ट्रिंग में बदलें, और इसे में धकेलें: symbol symbols symbolElement symbols अंतिम चरण स्वयं एसवीजी स्प्राइट बनाना है। यह "रूट" में और बच्चों के रूप में प्रतीकों के साथ एक स्ट्रिंग का प्रतिनिधित्व करता है: svg const svgSprite = `<svg>${symbols.join('')}</svg>`; और यदि आप प्लगइन्स का उपयोग करने पर विचार नहीं कर रहे हैं, जिसके बारे में मैं नीचे बात करूंगा, तो आपको फ़ाइल को बनाए गए स्प्राइट के साथ कुछ स्थिर फ़ोल्डर में रखना होगा। अधिकांश बंडलर फ़ोल्डर का उपयोग करते हैं: public fs.writeFileSync('public/sprite.svg', svgSprite); और यही है; स्क्रिप्ट उपयोग के लिए तैयार है: // generateSvgSprite.ts import { globSync } from 'glob'; import fs from 'fs'; import { HTMLElement, parse } from 'node-html-parser'; import path from 'path'; const svgFiles = globSync('src/icons/*.svg'); const symbols: string[] = []; svgFiles.forEach(file => { const code = fs.readFileSync(file, 'utf-8'); const svgElement = parse(code).querySelector('svg') as HTMLElement; const symbolElement = parse('<symbol/>').querySelector('symbol') as HTMLElement; const fileName = path.basename(file, '.svg'); svgElement.childNodes.forEach(child => symbolElement.appendChild(child)); symbolElement.setAttribute('id', fileName); if (svgElement.attributes.viewBox) { symbolElement.setAttribute('viewBox', svgElement.attributes.viewBox); } symbols.push(symbolElement.toString()); }); const svgSprite = `<svg>${symbols.join('')}</svg>`; fs.writeFileSync('public/sprite.svg', svgSprite); आप इस स्क्रिप्ट को अपने प्रोजेक्ट के रूट में डाल सकते हैं और इसे के साथ चला सकते हैं: tsx npx tsx generateSvgSprite.ts दरअसल, मैं यहां उपयोग कर रहा हूं क्योंकि मैं हर जगह टाइपस्क्रिप्ट में कोड लिखता था, और यह लाइब्रेरी आपको टाइपस्क्रिप्ट में लिखी गई नोड स्क्रिप्ट को निष्पादित करने की अनुमति देती है। यदि आप शुद्ध जावास्क्रिप्ट का उपयोग करना चाहते हैं, तो आप इसे इसके साथ चला सकते हैं: tsx का node generateSvgSprite.js तो, आइए सारांशित करें कि स्क्रिप्ट क्या कर रही है: यह किसी भी फ़ाइल के लिए फ़ोल्डर में देखता है। .svg src/icons यह प्रत्येक आइकन की सामग्री को निकालता है और उसमें से एक प्रतीक तत्व बनाता है। यह सभी प्रतीकों को एक <svg />. यह फ़ोल्डर में फ़ाइल बनाता है। public sprite.svg आइकन का रंग कैसे बदलें आइए एक बारंबार और महत्वपूर्ण मामले को कवर करें: रंग! हमने एक स्क्रिप्ट बनाई जहां आइकन एक स्प्राइट में चला जाता है, लेकिन इस आइकन के पूरे प्रोजेक्ट में अलग-अलग रंग हो सकते हैं। हमें यह ध्यान रखना चाहिए कि न केवल तत्वों में भरण या स्ट्रोक विशेषताएँ हो सकती हैं, बल्कि , , और अन्य भी हो सकते हैं। एक बहुत ही उपयोगी सीएसएस सुविधा है जो हमारी मदद करेगी - । <svg/> path circle line currentcolor यह कीवर्ड किसी तत्व के रंग गुण का मान दर्शाता है। उदाहरण के लिए, यदि हम किसी ऐसे तत्व पर उपयोग करते हैं जिसकी है, तो इस तत्व की पृष्ठभूमि लाल होगी। color: red background: currentcolor मूलतः, हमें प्रत्येक स्ट्रोक या भरण विशेषता मान को में बदलने की आवश्यकता है। मुझे आशा है कि आप इसे मैन्युअल रूप से किया हुआ नहीं देख रहे हैं, हेह। और यहां तक कि कुछ कोड लिखना जो एसवीजी स्ट्रिंग्स को प्रतिस्थापित या पार्स करेगा, एक बहुत ही उपयोगी टूल की तुलना में बहुत कुशल नहीं है। currentcolor svgo यह एक एसवीजी ऑप्टिमाइज़र है जो न केवल रंगों के साथ बल्कि एसवीजी से अनावश्यक जानकारी को हटाने में भी मदद कर सकता है। आइए इंस्टॉल करें: svgo npm i -D svgo में अंतर्निहित प्लगइन्स हैं, और उनमें से एक है, जिसमें गुण है। यदि हम इस एसवीजी आउटपुट का उपयोग करते हैं, तो यह रंगों को से बदल देगा। यहां के साथ का उपयोग दिया गया है: svgo convertColors currentColor: true currentcolor convertColors svgo import { optimize } from 'svgo'; const output = optimize( '<svg viewBox="0 0 24 24"><path fill="#000" d="m15 5 4 4" /></svg>', { plugins: [ { name: 'convertColors', params: { currentColor: true, }, } ], } ) console.log(output); और आउटपुट होगा: <svg viewBox="0 0 24 24"><path fill="currentColor" d="m15 5 4 4"/></svg> आइए अपनी जादुई स्क्रिप्ट में जोड़ें जो हमने पिछले भाग में लिखा था: svgo // generateSvgSprite.ts import { globSync } from 'glob'; import fs from 'fs'; import { HTMLElement, parse } from 'node-html-parser'; import path from 'path'; import { Config as SVGOConfig, optimize } from 'svgo'; // import `optimize` function const svgoConfig: SVGOConfig = { plugins: [ { name: 'convertColors', params: { currentColor: true, }, } ], }; const svgFiles = globSync('src/icons/*.svg'); const symbols: string[] = []; svgFiles.forEach(file => { const code = fs.readFileSync(file, 'utf-8'); const result = optimize(code, svgoConfig).data; // here goes `svgo` magic with optimization const svgElement = parse(result).querySelector('svg') as HTMLElement; const symbolElement = parse('<symbol/>').querySelector('symbol') as HTMLElement; const fileName = path.basename(file, '.svg'); svgElement.childNodes.forEach(child => symbolElement.appendChild(child)); symbolElement.setAttribute('id', fileName); if (svgElement.attributes.viewBox) { symbolElement.setAttribute('viewBox', svgElement.attributes.viewBox); } symbols.push(symbolElement.toString()); }); const svgSprite = `<svg xmlns="http://www.w3.org/2000/svg">${symbols.join('')}</svg>`; fs.writeFileSync('public/sprite.svg', svgSprite); और स्क्रिप्ट चलाएँ: npx tsx generateSvgSprite.ts परिणामस्वरूप, एसवीजी स्प्राइट में वाले आइकन शामिल होंगे। और इन आइकनों का उपयोग प्रोजेक्ट में हर जगह आपके इच्छित रंग के साथ किया जा सकता है। currentColor प्लग-इन हमारे पास एक स्क्रिप्ट है, और हम जब चाहें इसे चला सकते हैं, लेकिन यह थोड़ा असुविधाजनक है कि हमें इसे मैन्युअल रूप से उपयोग करना चाहिए। इसलिए, मैं कुछ प्लगइन्स की अनुशंसा करता हूं जो हमारी फ़ाइलें देख सकते हैं और चलते-फिरते SVG स्प्राइट उत्पन्न कर सकते हैं: .svg ( उपयोगकर्ताओं के लिए) वाइट-प्लगइन-एसवीजी-स्प्राइटमैप वाइट यह मेरा प्लगइन है जिसमें मूल रूप से यह स्क्रिप्ट शामिल है जिसे हमने अभी इस लेख में बनाया है। प्लगइन में डिफ़ॉल्ट रूप से रिप्लेसमेंट सक्षम है, जिससे आप प्लगइन को बहुत आसानी से सेट कर सकते हैं। currentColor // vite.config.ts import svgSpritemap from 'vite-plugin-svg-spritemap'; export default defineConfig({ plugins: [ svgSpritemap({ pattern: 'src/icons/*.svg', filename: 'sprite.svg', }), ], }); ( उपयोगकर्ताओं के लिए) svg-spritemap-वेबपैक-प्लगइन वेबपैक मैंने इस वेबपैक प्लगइन का उपयोग तब तक किया जब तक कि मैंने Vite पर स्विच नहीं किया। लेकिन यदि आप वेबपैक का उपयोग कर रहे हैं तो यह प्लगइन अभी भी एक अच्छा समाधान है। आपको मैन्युअल रूप से रंग रूपांतरण सक्षम करना चाहिए, और यह इस तरह दिखेगा: // webpack.config.js const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin'); module.exports = { plugins: [ new SVGSpritemapPlugin('src/icons/*.svg', { output: { svgo: { plugins: [ { name: 'convertColors', params: { currentColor: true, }, }, ], }, filename: 'sprite.svg', }, }), ], } लेआउट में उपयोग मैं में एक उदाहरण प्रदान करूंगा, लेकिन आप इसे जहां चाहें वहां लागू कर सकते हैं क्योंकि यह ज्यादातर HTML के बारे में है। इसलिए, चूंकि हमारे बिल्ड फ़ोल्डर में है, हम स्प्राइट फ़ाइल तक पहुंच सकते हैं और मूल घटक बना सकते हैं: रिएक्ट sprite.svg Icon const Icon: FC<{ name: string }> = ({ name }) => ( <svg> <use href={`/sprite.svg#${name}`} /> </svg> ); const App = () => { return <Icon name="pen" />; }; अंतिम परिणाम इसलिए, आइकनों के साथ बहुत सारे मैन्युअल काम को रोकने के लिए, सब कुछ संक्षेप में प्रस्तुत करते हुए, हम: वांछनीय नामों के साथ प्रोजेक्ट में व्यवस्थित आइकनों को आसानी से सहेज और रख सकते हैं एक स्क्रिप्ट है जो सभी आइकन को एक अलग फ़ाइल में एक स्प्राइट में जोड़ती है जो बंडल आकार को कम करती है और हमें प्रोजेक्ट में कहीं भी इन आइकन का उपयोग करने की अनुमति देती है हमारे पास एक उपयोगी उपकरण है जो हमें आइकनों को अनावश्यक विशेषताओं से दूर रखने और उपयोग के स्थान पर रंग बदलने में मदद करता है हमारे पास एक प्लगइन है जो हमारी आइकन फ़ाइलों को देख सकता है और निर्माण प्रक्रिया के एक भाग के रूप में चलते-फिरते स्प्राइट उत्पन्न कर सकता है एक आइकन घटक है जो शीर्ष पर एक चेरी है निष्कर्ष विकास में दक्षता केवल समय बचाने के बारे में नहीं है; यह हमारी रचनात्मक क्षमता को उजागर करने के बारे में है। आइकनों को प्रबंधित करने जैसे महत्वपूर्ण कार्यों को स्वचालित करना केवल एक शॉर्टकट नहीं है; यह एक सहज, अधिक प्रभावशाली कोडिंग अनुभव का प्रवेश द्वार है। और ऐसी नियमित चीज़ों पर समय बचाकर, आप अधिक जटिल कार्यों पर ध्यान केंद्रित कर सकते हैं और एक डेवलपर के रूप में तेजी से विकसित हो सकते हैं।
