SVG থেকে JSX রূপান্তরকারী

SVG থেকে JSX রূপান্তরকারী কী?

SVG থেকে JSX রূপান্তরকারী একটি বিনামূল্যের ইন-ব্রাউজার টুল যা সাধারণ SVG মার্কআপকে বৈধ React JSX-এ পরিণত করে যা আপনি সরাসরি একটি কম্পোনেন্টে বসাতে পারেন। React DOM অ্যাট্রিবিউটগুলো camelCase-এ (strokeWidth, clipPath, fillRule) প্রত্যাশা করে, class-এর বদলে className ব্যবহার করে, এবং style অ্যাট্রিবিউটকে স্ট্রিং নয় বরং camelCase প্রপার্টির অবজেক্ট হিসেবে চায় — এই টুলটি এসব স্বয়ংক্রিয়ভাবে ঠিক করে। ফ্রন্ট-এন্ড ডেভেলপার এবং ডিজাইনাররা এটি ব্যবহার করেন যখন তাঁরা Figma, Illustrator বা কোনো আইকন সেট থেকে আইকন রপ্তানি করেন। মন্তব্য, এডিটর মেটাডেটা এবং XML ঘোষণা সরাতে ঐচ্ছিক পরিষ্কার চালু করুন, এবং বেছে নিন আউটপুট ইনলাইন JSX হবে নাকি React.SVGProps দিয়ে টাইপ করা একটি ফাংশন, memo() বা forwardRef কম্পোনেন্ট হবে।

SVG থেকে JSX রূপান্তরকারী কীভাবে ব্যবহার করবেন

1. আপনার SVG মার্কআপ ইনপুট বাক্সে পেস্ট করুন, বা একটি .svg ফাইল ড্রপ জোনে ফেলুন।
2. নিচের আউটপুট বাক্সে রূপান্তরিত JSX পড়ুন — অ্যাট্রিবিউটগুলো camelCase-এ হয়, class হয়ে যায় className, ইনলাইন style একটি style অবজেক্ট হয়, এবং খালি ট্যাগ স্বয়ং-বন্ধ হয়।
3. সেটিংস খুলুন এবং একটি কম্পোনেন্ট আউটপুট বেছে নিন: ইনলাইন JSX, একটি ফাংশন কম্পোনেন্ট, একটি memo() কম্পোনেন্ট, বা একটি forwardRef কম্পোনেন্ট।
4. র‍্যাপারে ব্যবহৃত নাম নিয়ন্ত্রণ করতে কম্পোনেন্ট নাম ক্ষেত্রটি সেট করুন (উদাহরণস্বরূপ MyIcon)।
5. কম্পোনেন্টকে React.SVGProps দিয়ে টাইপ করতে TypeScript props চালু করুন, অথবা প্রথমে মন্তব্য ও এডিটর মেটাডেটা সরাতে SVG পরিষ্কার করুন চালু করুন।
6. JSX কপি করতে কপি-তে ক্লিক করুন, তারপর এটি আপনার React বা Next.js প্রকল্পে পেস্ট করুন।

উদাহরণ

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

সচরাচর জিজ্ঞাসিত প্রশ্ন

রূপান্তরকারী আমার SVG-তে কী পরিবর্তন করে?

এটি হাইফেনযুক্ত এবং নেমস্পেসযুক্ত অ্যাট্রিবিউটগুলোর নাম React-এর camelCase রূপে পরিবর্তন করে (stroke-width থেকে strokeWidth, xlink:href থেকে xlinkHref), class-কে className-এ পরিণত করে, ইনলাইন style স্ট্রিংকে camelCase কী সহ একটি JSX style অবজেক্টে পুনর্লিখন করে, এবং path ও rect-এর মতো খালি এলিমেন্টগুলোকে স্বয়ং-বন্ধ করে যাতে সেগুলো বৈধ JSX হয়।

কম্পোনেন্ট আউটপুট বিকল্পগুলো কীভাবে কাজ করে?

মার্কআপ যেকোনো জায়গায় রাখতে ইনলাইন JSX বেছে নিন, অথবা আপনার প্রবেশ করানো কম্পোনেন্ট নাম দিয়ে এটিকে একটি ফাংশন, memo() বা forwardRef কম্পোনেন্ট হিসেবে মুড়ে দিন। একটি forwardRef কম্পোনেন্ট একটি ref পায় যা রুট svg-তে যুক্ত হয়। যেকোনো র‍্যাপারকে React.SVGProps দিয়ে টাইপ করতে এবং {...props} ছড়িয়ে দিতে TypeScript props চালু করুন।

এটি কি ইনলাইন স্টাইল রূপান্তর করে?

হ্যাঁ। style="fill:red;stroke-width:2"-এর মতো একটি অ্যাট্রিবিউট style={{ fill: "red", strokeWidth: "2" }}-এর মতো একটি JSX style অবজেক্টে পুনর্লিখিত হয়, যেখানে প্রপার্টির নাম camelCase-এ এবং মান স্ট্রিং হিসেবে রাখা হয়। CSS কাস্টম প্রপার্টি (--var) স্ট্রিং কী হিসেবে সংরক্ষিত থাকে।

SVGO ধাঁচের পরিষ্কার কী করে?

SVG পরিষ্কার করুন চালু থাকলে টুলটি XML ঘোষণা, DOCTYPE, মন্তব্য, <metadata>, inkscape: ও sodipodi:-এর মতো এডিটর নেমস্পেস, এবং svg-এর version অ্যাট্রিবিউট সরিয়ে দেয়, তারপর হোয়াইটস্পেস সংকুচিত করে — সবই JSX রূপান্তর চলার আগে।

আমার SVG কি কোথাও আপলোড করা হয়?

না। একটি ফাইল ফেলা বা মার্কআপ পেস্ট করা সম্পূর্ণরূপে আপনার ব্রাউজারে চলা একটি বিশুদ্ধ স্ট্রিং রূপান্তর চালায়, তাই আপনার SVG কখনও কোনো সার্ভারে পাঠানো হয় না এবং টুলটি অফলাইনে কাজ করে।