تحويل SVG إلى مكوّن React
الصق كود SVG واحصل على مكوّن React دالي جاهز للاستيراد بسمات camelCase.
كيف يعمل
يُحلَّل SVG باستخدام محلل DOM الخاص بالمتصفح، لذا يُفهم فعليًا كترميز، لا كنمط نصي
مطابق فقط. يُحوَّل كل اسم سمة إلى مكافئه في React/DOM باستخدام نفس التحويل الذي يستخدمه
React داخليًا (stroke-width ← strokeWidth،
class ← className، xlink:href ←
xlinkHref، وهكذا)، وتُعاد كتابة الشجرة كـ JSX، وتُغلَّف في مكوّن دالي صغير.
عند تفعيل "قبول props"، يُنشر {...props} على العنصر الجذري بحيث يمكن لمن
يستدعي المكوّن تمرير width أو className أو معالج
onClick بالطريقة المعتادة في React.
يتم التحليل والتحويل بالكامل داخل جافاسكريبت هذه الصفحة، بناءً على DOM الذي يبنيه المتصفح من مدخلاتك. لا شيء يُرفع.
أسئلة شائعة
ما الذي يتغيّر بين SVG وJSX؟
تتحول أسماء السمات إلى camelCase (تصبح stroke-width هي strokeWidth، وfill-rule هي fillRule)، وتصبح class هي className، وتحصل الوسوم ذاتية الإغلاق على الشرطة المائلة النهائية التي يتطلبها JSX. الناتج المرئي مطابق تمامًا.
هل يمكنني التحكم في الحجم واللون عبر props؟
فعّل "قبول props" ليقوم المكوّن بنشر {...props} على عنصر <svg> الجذري، بحيث يمكنك تجاوز width أو height أو className أو أي شيء آخر من أي مكان تستخدمه فيه، وهو النمط المعتاد لمكوّنات الأيقونات.
هل يُرسل هذا كود SVG الخاص بي إلى أي مكان؟
لا. التحويل هو تحويل نصوص/سمات بسيط يتم داخل متصفحك. لا شيء يُرفع.