لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

مُحول SVG إلى مكون React JSX

مطورنص

إعلان · حذف؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · حذف؟

مرشد

مُحول SVG إلى مكون React JSX

أدخل التصاميم الخام للـ SVG واحصل على مكوّن وظيفي من React بشكل نظيف. يُحوّل الأداة الأسماء المُحددة إلى شكل camelCase لكل خاصية، وتحذف الأكواد غير المُستخدمة للـ JSX، وتحوّل الناتج إلى مكوّن جاهز للإدخال — اختياريًا مُصنّف، اختياريًا مُعدّل، وفقًا للخصائص. forwardRef-مُحاط، وفقًا للخصائص المُحددة. كل شيء يعمل محليًا في متصفحك، لذا لا يغادر أيقوناتك أو شعاراتك جهازك.

كيفية استخدام

أدخل <svg>…</svg> النص الكامل
أدخل اسم المكوّن (بشكل PascalCase، مثل ArrowRightIcon).
إيقاف تي بى ساى، forwardRefمُعدّل حجم المُدخلات، وتمديد الخصائص لتتناسب مع مشروعك.
انسخ الكود المُنشأ أو احفظه كـ .tsx / .jsx ملف.

خصائص

أسماء مُحددة بـ camelCase 0–9 (top row) stroke-width يتحول إلى strokeWidth, fill-rule يتحول إلى fillRuleوإلى النهاية في المواصفة الكاملة للـ SVG.
معالجة الكلمات المُحتفظ بها 0–9 (top row) class تُحوّل إلى className, for ل htmlForو، و xlink:href ل xlinkHref.
مُحلّل الأسلوب المُباشر 0–9 (top row) style="color: red; font-size: 12px" يُحوّل إلى كائن أسلوب في JSX مع أسماء مُحددة بـ camelCase.
مخرج تي بى ساى – يُنتج React.SVGProps<SVGSVGElement> أنواع البيانات عند التفعيل.
وضع أيقونة قابلة للتوسيع – استبدل القيم المُحددة لعرض/ارتفاع بخصائص مع قيم افتراضية منطقية. width و height مُحاط بـ forwardRef
– يُنتج مكوّنًا مع لأداة تطوير المُطورين. React.forwardRef تمديد الخصائص displayName – يُرسل الخصائص المُتعددة إلى الجذر
لذا يمكن للمستهلكين تعيين ، أو خصائص ARIA، أو معالجات الأحداث. <svg> مُصمم للعمل دون اتصال className– لا يغادر SVG المتصفح؛ لا تُرفع بيانات، لا توجد مُراجعات إلى الخادم.
لماذا يُعيد تسمية أسماء خصائص SVG في React وJSX؟ يُحول JSX مباشرة إلى الوصول إلى خصائص الكائن في لغة JavaScript، ولا يمكن أن تحتوي على علامات ناقص. لذا يعتمد React على أسماء مُحددة بـ camelCase تُطابق معايير DOM — على سبيل المثال،

 التعليمات

لأن DOM يعرضها كـ

. يُغيّر عدد قليل من الخصائص ( stroke-width يتحول إلى strokeWidth ) لأنها تتعارض مع كلمات محفوظة في لغة JavaScript، ويُعاد تسميتها ( element.strokeWidth) لتجنب تعارضات المُحلّل.class, forما الذي يفعله React.forwardRef بالنسبة للمكوّنات SVG؟className, htmlForبشكل افتراضي، لا يمكن لمكوّن وظيفي أن يتلقى
من والده.

يُعرض العقد المُباشر للنقطة إلى والد المكوّن، وهو أمر ضروري عندما تحتاج إلى الوصول المباشر إلى المُنتج المُعرض لغرض إدارة التركيز، أو القياس، أو التكامل مع مكتبات الحركة مثل Framer Motion أو GSAP. ref لماذا يجب أن تكون أيقونات SVG مُدمجة كمكوّنات React بدلًا من صور داخلية؟ React.forwardRef باستخدام JSX، تُعطيك التحكم الكامل على شجرة DOM: يمكنك تخصيص الألوان والخطوط من خلال متغيرات CSS، تفعيل مسارات فردية، تغيير الألوان في الوقت الفعلي، وحذف أيقونات غير المستخدمة أثناء بناء المشروع. أما <svg> فهي تُصرف كعنصر مُصوّر مُستقر — لا يمكن تخصيص مكوناتها من الصفحة المُستضافة.
لماذا يُحتفظ بعرض وارتفاع كخصائص بدلًا من أبعاد مُحددة؟

القيم المُحددة للبُعد تُثبّت أيقونة على حجم واحد وتُجعل تجميعها داخل تخطيط صعب. تُعرض <img src="icon.svg"> كخصائص (غالبًا ما تُستخدم مع القيمة الأصلية
) تسمح للمستهلكين بعرض نفس المكوّن بحجم 16 بكسل في شريط أدوات وحجم 48 بكسل في شريط رئيسي، مع الحفاظ على جودة التصغير في كل حجم باستخدام التوسيع المتجه للـ SVG.

MyIcon width و height أدخل التصاميم الخام للـ SVG هنا... viewBoxمُحول SVG إلى مكوّن JSX لـ React