ডেভেলপাররা প্রায়ই সরাসরি JSX-এ SVG ঢোকান। এটি ব্যবহার করা সুবিধাজনক, তবে এটি JS বান্ডিলের আকার বাড়ায়। অপ্টিমাইজেশানের সাধনায়, আমি বান্ডিলটি বিশৃঙ্খল না করে SVG আইকনগুলি ব্যবহার করার অন্য উপায় খুঁজে বের করার সিদ্ধান্ত নিয়েছি। আমরা SVG sprites সম্পর্কে কথা বলব, সেগুলি কী, কীভাবে সেগুলি ব্যবহার করতে হয় এবং তাদের সাথে কাজ করার জন্য কী সরঞ্জাম উপলব্ধ। তত্ত্ব দিয়ে শুরু করে, আমরা একটি স্ক্রিপ্ট লিখব যা ধাপে ধাপে একটি SVG স্প্রাইট তৈরি করে এবং এবং জন্য প্লাগইন নিয়ে আলোচনা করে শেষ করব। vite ওয়েবপ্যাকের SVG স্প্রাইট কি? একটি ইমেজ স্প্রাইট হল একটি একক চিত্রের মধ্যে স্থাপন করা চিত্রগুলির একটি সংগ্রহ। এর পরিবর্তে, SVG Sprite হল SVG বিষয়বস্তুর একটি সংগ্রহ, যা এ মোড়ানো হয়, যা এ রাখা হয়। <symbol /> <svg /> উদাহরণস্বরূপ, আমাদের কাছে একটি সাধারণ SVG পেন আইকন রয়েছে: একটি SVG স্প্রাইট পেতে, আমরা ট্যাগটিকে দিয়ে প্রতিস্থাপন করব, এবং এটিকে বাহ্যিকভাবে দিয়ে মোড়ানো হবে: <svg /> <symbol /> <svg /> এখন এটি একটি SVG স্প্রাইট, এবং আমাদের ভিতরে সহ একটি আইকন রয়েছে। id="icon-pen" ঠিক আছে, কিন্তু আমাদের এইচটিএমএল পৃষ্ঠায় এই আইকনটি কীভাবে স্থাপন করা যায় তা খুঁজে বের করা উচিত। আমরা অ্যাট্রিবিউটের সাথে ট্যাগটি ব্যবহার করব, আইকনের আইডি নির্দিষ্ট করে, এবং এটি SVG-এর ভিতরে এই উপাদানটিকে নকল করবে। href <use /> আসুন কিভাবে কাজ করে তার একটি উদাহরণ দেখি: <use /> এই উদাহরণে, দুটি বৃত্ত আছে। প্রথমটির একটি নীল আউটলাইন রয়েছে এবং দ্বিতীয়টি প্রথমটির একটি ডুপ্লিকেট কিন্তু একটি লাল ফিল সহ৷ আসুন আমাদের SVG স্প্রাইট-এ ফিরে যাই। ব্যবহারের পাশাপাশি, আমরা এটি পাব: <use /> এখানে, আমাদের পেন আইকন সহ একটি বোতাম রয়েছে। এখন পর্যন্ত, আমরা এ তার কোড ছাড়া একটি আইকন ব্যবহার করেছি। আমাদের পৃষ্ঠায় একাধিক বোতাম থাকলে, এটি আমাদের HTML লেআউটের আকারকে একবারের বেশি প্রভাবিত করবে না কারণ সমস্ত আইকন আমাদের SVG স্প্রাইট থেকে আসবে এবং পুনরায় ব্যবহারযোগ্য হবে। <button /> SVG স্প্রাইট ফাইল তৈরি করা হচ্ছে আসুন আমাদের SVG স্প্রাইটকে একটি আলাদা ফাইলে নিয়ে আসি যাতে আমাদের ফাইলটি বিশৃঙ্খল করতে না হয়। প্রথমে একটি ফাইল তৈরি করুন এবং এতে একটি SVG স্প্রাইট রাখুন। পরবর্তী ধাপ হল এ এট্রিবিউট ব্যবহার করে আইকনে অ্যাক্সেস প্রদান করা: index.html sprite.svg <use/> href স্বয়ংক্রিয় SVG স্প্রাইট সৃষ্টি আইকন ব্যবহারে অনেক সময় বাঁচাতে, আসুন এই প্রক্রিয়াটির জন্য একটি অটোমেশন সেট আপ করি৷ আইকনগুলিতে সহজ অ্যাক্সেস পেতে এবং সেগুলিকে আমরা যেমন চাই তেমন পরিচালনা করতে, সেগুলিকে আলাদা করতে হবে, প্রতিটি তার নিজস্ব ফাইলে। প্রথমত, আমাদের একই ফোল্ডারে সমস্ত আইকন রাখা উচিত, উদাহরণস্বরূপ: এখন, আসুন একটি স্ক্রিপ্ট লিখি যা এই ফাইলগুলিকে ধরে এবং একটি একক SVG স্প্রাইটের মধ্যে একত্রিত করে। আপনার প্রকল্পের রুট ডিরেক্টরিতে ফাইল তৈরি করুন। generateSvgSprite.ts লাইব্রেরি ইনস্টল করুন: গ্লোব npm i -D glob ব্যবহার করে প্রতিটি আইকনের জন্য সম্পূর্ণ পাথের একটি অ্যারে পান: globSync এখন, আমরা প্রতিটি ফাইল পাথ পুনরাবৃত্তি করব এবং নোডের অন্তর্নির্মিত লাইব্রেরি ব্যবহার করে ফাইল সামগ্রী পাব: fs দুর্দান্ত, আমাদের কাছে প্রতিটি আইকনের SVG কোড আছে, এবং এখন আমরা সেগুলিকে একত্রিত করতে পারি, কিন্তু আমাদের উচিত প্রতিটি আইকনের ভিতরে ট্যাগটিকে ট্যাগ দিয়ে প্রতিস্থাপন করা এবং অকেজো SVG বৈশিষ্ট্যগুলি সরিয়ে ফেলা উচিত৷ svg symbol আমাদের SVG কোডকে কিছু HTML পার্সার লাইব্রেরির সাথে পার্স করা উচিত যাতে এর DOM প্রতিনিধিত্ব পাওয়া যায়। আমি ব্যবহার করব: node-html-parser আমরা SVG কোড পার্স করেছি এবং SVG উপাদানটি পেয়েছি যেন এটি একটি বাস্তব HTML উপাদান। একই পার্সার ব্যবহার করে, এর বাচ্চাদের সরানোর জন্য একটি খালি উপাদান তৈরি করুন: svgElement symbol symbol থেকে বাচ্চাদের বের করার পরে, আমাদের এটি থেকে এবং বৈশিষ্ট্যগুলিও পাওয়া উচিত। হিসাবে, আইকন ফাইলের নাম সেট করা যাক। svgElement id viewBox id এখন, আমাদের কাছে একটি উপাদান রয়েছে যা একটি SVG স্প্রাইটে স্থাপন করা যেতে পারে। সুতরাং, ফাইলগুলি পুনরাবৃত্তি করার আগে পরিবর্তনশীলকে সংজ্ঞায়িত করুন, একটি স্ট্রিংয়ে রূপান্তর করুন এবং এটিকে পুশ করুন: symbol symbols symbolElement symbols চূড়ান্ত ধাপ হল SVG স্প্রাইট নিজেই তৈরি করা। এটি "রুট" এ সহ একটি স্ট্রিং এবং শিশুদের হিসাবে চিহ্নগুলি উপস্থাপন করে: 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 কিভাবে আইকন রং পরিবর্তন আসুন একটি ঘন ঘন এবং গুরুত্বপূর্ণ কেস কভার করা যাক: রং! আমরা একটি স্ক্রিপ্ট তৈরি করেছি যেখানে আইকনটি একটি স্প্রাইটে যায়, কিন্তু এই আইকনটির পুরো প্রকল্প জুড়ে বিভিন্ন রঙ থাকতে পারে। আমাদের মনে রাখা উচিত যে শুধুমাত্র উপাদানগুলিতেই ফিল বা স্ট্রোক বৈশিষ্ট্য থাকতে পারে না, , , এবং অন্যান্যও থাকতে পারে। একটি খুব দরকারী CSS বৈশিষ্ট্য আছে যা আমাদের সাহায্য করবে - । <svg/> path circle line currentcolor এই কীওয়ার্ডটি একটি উপাদানের রঙ বৈশিষ্ট্যের মান উপস্থাপন করে। উদাহরণস্বরূপ, যদি আমরা ব্যবহার করি এমন একটি উপাদানে যার একটি , তাহলে এই উপাদানটির একটি লাল পটভূমি থাকবে। color: red background: currentcolor মূলত, আমাদের প্রতিটি স্ট্রোক পরিবর্তন করতে হবে বা বৈশিষ্ট্যের মান পূরণ করতে হবে। আমি আশা করি আপনি এটি ম্যানুয়ালি করা দেখছেন না, হেহ। এমনকি কিছু কোড লেখা যা SVG স্ট্রিংগুলিকে প্রতিস্থাপন বা পার্স করবে একটি খুব দরকারী টুল এর তুলনায় খুব দক্ষ নয়। currentcolor svgo এটি একটি SVG অপ্টিমাইজার যা শুধুমাত্র রং দিয়েই নয় SVG থেকে অপ্রয়োজনীয় তথ্য মুছে ফেলার ক্ষেত্রেও সাহায্য করতে পারে। আসুন ইনস্টল করি: svgo npm i -D svgo এর অন্তর্নির্মিত প্লাগইন রয়েছে এবং তাদের মধ্যে একটি হল , যার প্রপার্টি আছে । আমরা এই SVG আউটপুট ব্যবহার করলে, এটি সাথে রং প্রতিস্থাপন করবে। এখানে সহ এর ব্যবহার রয়েছে: 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 ফলস্বরূপ, SVG sprite-এ সহ আইকন থাকবে। এবং এই আইকনগুলি আপনি চান যে কোনও রঙ দিয়ে প্রকল্পের সর্বত্র ব্যবহার করা যেতে পারে। currentColor প্লাগইন আমাদের একটি স্ক্রিপ্ট আছে, এবং আমরা যখনই চাই তখন এটি চালাতে পারি, তবে এটি আমাদের ম্যানুয়ালি ব্যবহার করা কিছুটা অসুবিধাজনক। তাই, আমি কয়েকটি প্লাগইন সুপারিশ করছি যেগুলি আমাদের ফাইলগুলি দেখতে পারে এবং যেতে যেতে SVG স্প্রাইট তৈরি করতে পারে: .svg ( ব্যবহারকারীদের জন্য) vite-plugin-svg-spritemap vite এটি আমার প্লাগইন যা মূলত এই স্ক্রিপ্টটি রয়েছে যা আমরা এই নিবন্ধে তৈরি করেছি। প্লাগইনটিতে প্রতিস্থাপন ডিফল্টরূপে সক্ষম করা আছে, তাই আপনি প্লাগইনটি খুব সহজেই সেট আপ করতে পারেন। 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-webpack-plugin ওয়েবপ্যাক আমি Vite এ স্যুইচ না করা পর্যন্ত এই ওয়েবপ্যাক প্লাগইনটি ব্যবহার করেছি। কিন্তু আপনি যদি Webpack ব্যবহার করেন তবে এই প্লাগইনটি এখনও একটি ভাল সমাধান। আপনি ম্যানুয়ালি রঙ রূপান্তর সক্ষম করা উচিত, এবং এটি এই মত দেখাবে: // 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" />; }; চূড়ান্ত ফলাফল সুতরাং, আইকনগুলির সাথে প্রচুর ম্যানুয়াল কাজ রোধ করতে সবকিছুর সংক্ষিপ্তসার, আমরা: প্রজেক্টে কাঙ্খিত নাম সহ সংগঠিত আইকনগুলি সহজেই সংরক্ষণ এবং রাখতে পারেন একটি স্ক্রিপ্ট আছে যা একটি পৃথক ফাইলে সমস্ত আইকনকে একটি একক স্প্রাইটের সাথে একত্রিত করে যা বান্ডিলের আকার হ্রাস করে এবং প্রকল্পের যে কোনো জায়গায় এই আইকনগুলি ব্যবহার করতে দেয় একটি দরকারী টুল আছে যা আমাদের আইকনগুলিকে অপ্রয়োজনীয় বৈশিষ্ট্যগুলি থেকে বিচ্ছিন্ন রাখতে এবং ব্যবহারের জায়গায় রঙ পরিবর্তন করতে সহায়তা করে একটি প্লাগইন আছে যা আমাদের আইকন ফাইলগুলি দেখতে পারে এবং বিল্ড প্রক্রিয়ার অংশ হিসাবে যেতে যেতে স্প্রিট তৈরি করতে পারে একটি আইকন উপাদান আছে যা উপরে একটি চেরি উপসংহার উন্নয়নে দক্ষতা শুধু সময় বাঁচানোর জন্য নয়; এটা আমাদের সৃজনশীল সম্ভাবনা আনলক সম্পর্কে. আইকন ম্যানেজ করার মতো নিটি-কঠিন কাজগুলিকে স্বয়ংক্রিয় করা কেবল একটি শর্টকাট নয়; এটি একটি মসৃণ, আরও প্রভাবশালী কোডিং অভিজ্ঞতার একটি গেটওয়ে। এবং এই জাতীয় রুটিন জিনিসগুলিতে সময় বাঁচানোর ফলে আপনি আরও জটিল কাজগুলিতে ফোকাস করতে পারেন এবং একজন বিকাশকারী হিসাবে দ্রুত বিকাশ করতে পারেন।
