انتقل إلى المحتوى
أدوات التحويل

تحويل SVG إلى JSX

يحوّل ترميز SVG إلى مكوّن دالة في React: يحسّن SVGO ملف SVG في متصفحك، ثم يحوّله SVGR على الخادم. تُكتب السمات بصيغة camelCase (stroke-width إلى strokeWidth)، وتصبح الأحجام الرقمية أرقامًا، ويُنشر {...props} على عنصر <svg> الجذري.

تحويل أيقونة مُصدَّرة من Figma أو Illustrator إلى مكوّن React.

SVG

originalOriginal
Result

JSX

متى تستخدمها

  • تحويل أيقونة مُصدَّرة من Figma أو Illustrator إلى مكوّن React.
  • التحقق من كيفية إعادة SVGR كتابة ملف SVG قبل إضافة SVGR إلى خط البناء.

طريقة الاستخدام

  1. الصق ترميز SVG أو حمّل ملف .svg؛ يُرفض الإدخال الذي ليس SVG صالحًا مع رسالة خطأ.
  2. افتح الإعدادات لإيقاف تحسين SVGO أو تبديل إضافات مثل remove title أو merge paths؛ وتقارن المعاينة أسفل المحرر بين SVG الأصلي والمحسَّن.
  3. انسخ المكوّن وأعد تسمية SvgComponent؛ ومرّر className أو width أو fill كـ props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

مكوّن React (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

التفاصيل والقيود

يعمل SVGO في Web Worker داخل متصفحك؛ ثم يُرسَل SVG المحسَّن إلى نقطة النهاية /api/svg-to-jsx في هذا الموقع، حيث يُنشئ SVGR المكوّن. لا تلصق رسومات سرية.

مع الإعدادات الافتراضية، تُحذف التعليقات و<title> و<desc> وبيانات المحرر الوصفية، وتُختصر بيانات المسارات (يصبح M5.000 12.000 L19.000 12.000 هو M5 12h14). أوقف التحسين لتحويل SVG كما لصقته.

تصبح سلاسل style كائنات style، وتصبح class هي className.

تستهدف المخرجات React DOM؛ استخدم SVG to React Native من أجل react-native-svg.

FAQ

لماذا يحتفظ العنصر الجذري بـ width وheight؟

إضافة remove dimensions متوقفة في إعدادات SVGO، ويستخدم SVGR الخيارات الافتراضية، لذا تبقى الأبعاد أرقامًا (width={24}). تجاوزها عبر props، لأن {...props} يأتي بعدها.

هل يتيح لي fill="currentColor" ضبط اللون من CSS؟

نعم. يُحتفظ بـ currentColor، فتتبع الأيقونة لون CSS للعنصر الأب. لا تُستبدل الألوان المكتوبة مباشرة داخل المسارات.

لماذا اختفى <title> من المكوّن؟

إضافة SVGO remove title مفعّلة افتراضيًا. أوقفها من الإعدادات، أو أوقف التحسين كليًا، إذا كنت تحتاج <title> لإمكانية الوصول.

هل تتوفر مخرجات TypeScript؟

لا. تُخرج الصفحة مكوّن JavaScript بلا توصيفات أنواع.

المواصفات والمراجع