تحويل SVG إلى مكوّن React

الصق ملف SVG واحصل على مكوّن React (.tsx) جاهز للاستخدام، مع تحويل جميع السمات إلى camelCase (className وstrokeWidth...) وتمرير الخاصية props.

مثال:

اسم المكوّن

SVG المصدر

ماذا يفعل هذا التحويل بالضبط؟

لا يقبل JSX (المستخدم في React) سمات HTML/SVG بنمط kebab-case مثل stroke-width أو class: إذ يجب كتابتها بنمط camelCase (strokeWidth وclassName). تعيد هذه الأداة كتابة جميع سمات SVG تلقائيًا وفق هذه القاعدة وتضع الناتج داخل دالة مكوّن بلغة TypeScript، جاهزة للنسخ إلى مشروع React.

هل يقبل المكوّن الناتج خصائص (props) مخصّصة مثل اللون والحجم؟

نعم، يمرّر المكوّن جميع الخصائص المستلمة ({...props}) مباشرة إلى الوسم <svg>: يمكنك إذن تمرير className وwidth وheight وonClick وغيرها من المكوّن الأب كما مع أي عنصر SVG.

هل يعمل المكوّن أيضًا بجافاسكريبت خالصة (دون TypeScript)؟

الملف الناتج مكتوب بلغة TypeScript (مع تحديد أنواع الخصائص)، لكن يكفي حذف سطر استيراد النوع والتعليق التوضيحي : SVGProps<SVGSVGElement> لاستخدامه مباشرة في مشروع جافاسكريبت عادي.

معالجة محلية 100%: يجري توليد المكوّن بالكامل داخل متصفحك، ولا يُرسَل ملف SVG الخاص بك أبدًا إلى أي خادم.