كل مطوّر لصق ملف SVG خام في مشروع React يعرف هذه المشكلات جيداً.
تستخدم ملفات SVG الخام خصائص بالشرطة مثل clip-rule وfill-opacity وstroke-linecap. بينما يتطلب React صيغة camelCase: clipRule وfillOpacity وstrokeLinecap. نسيان خاصية واحدة يُبطئ البناء ويتسبب في أخطاء صعبة التتبع.
تُصدّر أدوات Figma وSketch ملفات SVG بألوان مُثبَّتة مثل fill="#3B82F6"، فيصبح كل أيقونة مكوّناً للاستخدام مرة واحدة فقط. إعادة توظيفها في الوضع الداكن أو حالات التمرير أو ألوان علامة مختلفة تستلزم نسخها وتعديلها يدوياً.
تُضيف أدوات التصميم عناصر <title> و<defs> ومجموعات <g> فارغة وخصائص مكررة لكل SVG مُصدَّر. هذا الكود الزائد يُضخّم حزمة JSX ويُبطئ وقت التحليل — وهو أمر واضح بشكل خاص عند استخدام عشرات الأيقونات المُضمَّنة.
الصق SVG على اليسار، واحصل على مكوّن React على اليمين
ستة تحويلات على مستوى الإنتاج، فورية، كلها داخل المتصفح.
الصق أي SVG ويظهر مكوّن React فوراً. يعمل تحويل SVG إلى React كتحويل AST داخل المتصفح — بدون طلبات شبكة، بدون تأخير، بدون قيود على حجم الملف.
فعّل وضع TSX وسيضيف المحوّل تلقائياً interface IconProps extends React.SVGProps<SVGSVGElement> في أعلى الملف. كل خاصية مُكتَّبة بالكامل — className والخصائص المخصصة، بدون تحويلات قسرية.
قبل تحويل SVG إلى React، تُزيل الأداة عناصر <title> و<defs> والمجموعات الفارغة والخصائص المكررة التي تُصدّرها Figma أو Sketch، وتدمج المسارات وتُبسّطها — مما يُقلّص حجم المخرجات بنسبة تصل إلى 60%.
مع تفعيل وضع Tailwind، يستبدل محوّل SVG إلى React الألوان المُثبَّتة في fill وstroke بـ className="fill-current" وcurrentColor. تُورث الأيقونات لون نص العنصر الأب فوراً وتعمل بشكل مثالي مع أي سمة.
جميع خصائص SVG ذات الشرطة — clip-rule وfill-opacity وstroke-linecap وxlink:href — تُعاد تسميتها تلقائياً إلى مكافئاتها بصيغة camelCase في React، ويُحوَّل class إلى className. مخرجات SVG إلى React دائماً JSX صالح.
احذف width وheight المُثبَّتَين من عنصر SVG الجذر بنقرة واحدة. سيتكيّف مكوّن SVG إلى React مع الحجم عبر CSS أو خاصية className، ليكون متجاوباً بالكامل وسهل التحكم من التخطيط الأب.
من تصدير SVG الخام إلى مكوّن React جاهز للصق في أقل من 30 ثانية.
انسخ مصدر SVG من Figma أو Sketch أو مكتبة أيقونات أو ملف SVG، ثم الصقه في اللوحة اليسرى لأداة SVG إلى React. تقبل الأداة أي SVG صالح بما في ذلك الأيقونات متعددة المسارات والرسوم التوضيحية المعقدة.
حدد تنسيق المخرجات والتحسينات بناءً على متطلبات مشروعك. فعّل TypeScript للحصول على مخرجات TSX مع props مُكتَّبة؛ فعّل SVGO لتنظيف الكود الزائد من Figma قبل تحويل SVG إلى React؛ فعّل Tailwind CSS لاستبدال الألوان المُثبَّتة بـ currentColor.
تعرض اللوحة اليمنى مخرجات SVG إلى React في الوقت الفعلي أثناء الكتابة. انقر على نسخ لإرسال مكوّن React إلى الحافظة، ثم الصقه مباشرةً في ملف .jsx أو .tsx — بدون أي تعديلات على التنسيق.
سواء كنت تبني نظام تصميم أو تُحسّن حجم الحزمة أو تُسلّم أيقونات متقنة، يتكيّف محوّل SVG إلى React مع سير عملك.
الصق SVG الخام على اليسار ويظهر مكوّن React على اليمين في الوقت الفعلي. يعمل التحويل كاجتياز AST خالص داخل المتصفح — بدون انتظار، بدون خادم، بدون حدود للسرعة.
انتقل بمخرجات SVG إلى React من JSX إلى TSX بنقرة واحدة ويُولد interface IconProps extends React.SVGProps<SVGSVGElement> تلقائياً. كل فئة CSS وعلامة aria ومُعالج حدث مُكتَّب بالكامل، جاهز لمشاريع Next.js أو Vite في الوضع الصارم.
يُشغّل المحوّل ضغط SVGO قبل تحويل SVG إلى React — إزالة بيانات Figma الوصفية، دمج المسارات المكررة، تقليص حجم الملف بنسبة تصل إلى 60%. وضع Tailwind يستبدل ألوان fill المُثبَّتة بـ currentColor لتتكيّف كل أيقونة مع أي سمة بدون تجاوزات CSS.
أسئلة شائعة حول تحويل SVG إلى مكونات React وخصائص TypeScript وتحسين SVG.
SVG إلى React يعني تحويل ملفات SVG الخام — المُصدَّرة من Figma أو Sketch أو مكتبة أيقونات — إلى مكونات دالة React قابلة لإعادة الاستخدام. يُصبح ترميز SVG JSX، وتتحول الخصائص ذات الشرطة إلى camelCase، ويقبل المكوّن خصائص مثل className وwidth وaria-label.
إدراج SVG كمكوّن React يتيح التحكم في fill وstroke عبر CSS، وتحريك مسارات فردية باستخدام Framer Motion، وإضافة تسميات ARIA للوصول، وإزالة الأيقونات غير المستخدمة أثناء البناء. وسم <img> يعامل SVG كصورة معتمة دون توفير أيٍّ من هذه الإمكانات.
نعم. فعّل مفتاح TypeScript وستتحول مخرجات SVG إلى React من تنسيق .jsx إلى .tsx. يُولد المحوّل تلقائياً interface IconProps extends React.SVGProps<SVGSVGElement> في أعلى الملف، مما يوفر تغطية نوع كاملة لكل خاصية.
تعالج أداة SVG إلى React جميع الخصائص ذات الشرطة المعروفة: clip-rule ← clipRule، وfill-opacity ← fillOpacity، وstroke-linecap ← strokeLinecap، وstroke-linejoin ← strokeLinejoin، وstroke-width ← strokeWidth، وxlink:href ← href، وclass ← className. المخرجات دائماً JSX صالح.
قبل تحويل SVG إلى React، تُشغّل الأداة اجتياز JavaScript SVGO داخل المتصفح، وتُزيل عناصر <title> و<desc> و<defs> والمجموعات <g> الفارغة والخصائص التقديمية المكررة التي تُضيفها أدوات التصميم، وتدمج المسارات وتُبسّطها لإنتاج مكوّن React أخف وزناً.
مع تفعيل وضع Tailwind، يستبدل محوّل SVG إلى React خصائص fill="#hex" وstroke="#hex" المُثبَّتة بـ fill="currentColor" وstroke="currentColor"، ويُضيف className="fill-current" إلى عنصر <svg> الجذر. تُورث الأيقونات فئات text-color من العنصر الأب فوراً، مما يُيسّر الوضع الداكن وتبديل السمات.
لا. يتم معالجة تحويل SVG إلى React بالكامل داخل محرك JavaScript للمتصفح. لا يغادر مصدر SVG جهازك أبداً. لا خادم، ولا رفع ملفات، ولا تسجيل، ولا حدود للسرعة.
نعم، وإن كانت ملفات SVG الضخمة جداً (مئات المسارات) قد تستغرق وقتاً أطول قليلاً في المعالجة. تدعم أداة SVG إلى React الأيقونات متعددة المسارات وأقنعة القطع والتدرجات والأقنعة والمجموعات المتداخلة. للرسوم التوضيحية شديدة التعقيد، فكّر في تقسيمها إلى مكونات أصغر لأداء تصيير أفضل في React.
مجاني 100% · بدون تسجيل · بدون رفع ملفات · يعمل دون اتصال بالإنترنت
