SVG Forge

من SVG إلى مكوّن React

الصق ملف SVG لتحصل على مكوّن JSX أو TSX جاهز للاستيراد.

أو أفلت ملفًا / الصق الشيفرة أدناه
مكوّن React
تظهر المخرجات هنا

كيف تعمل

  1. 1الصق كود SVG أو أفلت ملف ‎.svg.
  2. 2فعّل مخرجات TypeScript وحدّد اسم المكوّن.
  3. 3انسخ المكوّن الناتج إلى قاعدة شيفرتك.

مجانًا وبلا تسجيل وبلا علامة مائية — كل شيء يعمل محليًا داخل متصفحك، فلا تغادر ملفاتك جهازك أبدًا.

الأسئلة الشائعة

ما الذي يُحوَّل بالضبط؟

تتحوّل السمات إلى camelCase (‏stroke-width ← strokeWidth)، وتصبح class هي className، وتُمرَّر بقية الخصائص إلى الجذر لتستطيع تمرير الحجم واللون.

هل يجدر بي تحسين ملف SVG أولاً؟

نعم — مرّره أولاً عبر محسّن SVG لتحصل على مكوّن أصغر وأنظف. الأداتان على بُعد نقرة واحدة.

أدوات ذات صلة

من SVG إلى Vue

حوّل أي ملف SVG إلى مكوّن أحادي الملف في Vue 3.

محسّن SVG

تنظيف بمحرّك SVGO: ملفات أصغر والبكسل نفسه. التوفير يظهر فورًا.

من SVG إلى data URI

رمّز SVG لاستخدامه في img src أو url() في CSS أو أي موضع يقبل عنوان URI.