محوّل SVG إلى JSX

ما هي محوّل SVG إلى JSX؟

محوّل SVG إلى JSX أداة مجانية تعمل داخل المتصفح وتحوّل ترميز SVG العادي إلى JSX صالح لـ React يمكنك لصقه مباشرة في مكوّن. يتوقّع React سمات DOM بصيغة camelCase (strokeWidth و clipPath و fillRule)، ويستخدم className بدلًا من class، ويطلب سمة style ككائن من خصائص بصيغة camelCase وليس كسلسلة — وهذه الأداة تصحّح كل ذلك تلقائيًا. يستخدمها مطوّرو الواجهة الأمامية والمصمّمون عند تصدير الأيقونات من Figma أو Illustrator أو مجموعة أيقونات. فعّل التنظيف الاختياري لإزالة التعليقات وبيانات المحرّر الوصفية وإعلانات XML، واختر ما إذا كان الإخراج JSX سطريًا أم مكوّن دالة أو memo() أو forwardRef مكتوب الأنواع بـ React.SVGProps.

كيفية استخدام محوّل SVG إلى JSX

1. الصق ترميز SVG في مربع الإدخال، أو أفلِت ملف .svg في منطقة الإفلات.
2. اقرأ JSX المحوّل في مربع الإخراج — تصبح السمات camelCase، وتتحول class إلى className، ويصبح style السطري كائن style، وتُغلق الوسوم الفارغة ذاتيًا.
3. افتح الإعدادات واختر إخراج المكوّن: JSX سطري، أو مكوّن دالة، أو مكوّن memo()، أو مكوّن forwardRef.
4. اضبط حقل اسم المكوّن للتحكم في الاسم المستخدم في الغلاف (مثل MyIcon).
5. فعّل خصائص TypeScript لكتابة أنواع المكوّن بـ React.SVGProps، أو فعّل تنظيف 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 الخاص بي؟

يعيد تسمية السمات ذات الشرطة أو المساحة الاسمية إلى صيغة camelCase الخاصة بـ React (stroke-width إلى strokeWidth، و xlink:href إلى xlinkHref)، ويحوّل class إلى className، ويعيد كتابة سلسلة style السطرية إلى كائن style في JSX بمفاتيح camelCase، ويُغلق العناصر الفارغة مثل path و rect ذاتيًا بحيث تصبح JSX صالحًا.

كيف تعمل خيارات إخراج المكوّن؟

اختر JSX سطري لوضع الترميز في أي مكان، أو غلّفه كمكوّن دالة أو memo() أو forwardRef باستخدام اسم المكوّن الذي تُدخله. يتلقّى مكوّن forwardRef مرجع ref يُرفق بعنصر svg الجذر. فعّل خصائص TypeScript لكتابة أنواع أي غلاف بـ React.SVGProps ونشر {...props}.

هل يحوّل الأنماط السطرية؟

نعم. تُعاد كتابة سمة مثل style="fill:red;stroke-width:2" إلى كائن style في JSX مثل style={{ fill: "red", strokeWidth: "2" }}، مع أسماء الخصائص بصيغة camelCase والقيم كسلاسل. تُحفظ خصائص CSS المخصّصة (--var) كمفاتيح نصية.

ماذا يفعل التنظيف بأسلوب SVGO؟

عند تفعيل تنظيف SVG، تزيل الأداة إعلانات XML و DOCTYPE والتعليقات و<metadata> ومساحات أسماء المحرّر مثل inkscape: و sodipodi: وسمة version في svg، ثم تُقلّص المسافات البيضاء — كل ذلك قبل تشغيل تحويل JSX.

هل يُرفع ملف SVG الخاص بي إلى أي مكان؟

لا. إفلات ملف أو لصق ترميز يشغّل تحويلًا نصيًا خالصًا بالكامل داخل متصفحك، لذا لا يُرسل ملف SVG الخاص بك إلى أي خادم أبدًا، وتعمل الأداة دون اتصال بالإنترنت.