حول هذه الأداة
تحوّل أداة من SVG إلى مكوّن JSX ترميز SVG الخام إلى مكوّن React نظيف، كما تفعل SVGR، لكن بالكامل في متصفحك دون رفع أي شيء. الصق أيقونة مُصدَّرة من أداة تصميم واحصل على مكوّن يمكنك استيراده وتنسيقه. تحلّل SVG باستخدام DOMParser وتُبلِغ عن خطأ واضح إذا كان الترميز مشوّهًا.
كل سمة SVG مُعرّفة بشرطة أو بمساحة أسماء تُحوَّل إلى camelCase لاسمها في React — stroke-width إلى strokeWidth، وfill-rule إلى fillRule، وclip-path إلى clipPath، وstop-color إلى stopColor، وxlink:href إلى xlinkHref، وxmlns:xlink إلى xmlnsXlink — بينما تُترَك سمات data-* وaria-* كما هي. تصبح سلاسل الأنماط المضمّنة كائنات style، وتُغلَق العناصر الفارغة مثل path وcircle ذاتيًا، وتُنشَر props على الجذر <svg {...props}> كي يظل المكوّن قابلًا للتهيئة. تتيح لك مفاتيح اختيارية استبدال قيم fill وstroke المُرمَّزة بـ currentColor (كي ترث الأيقونة لون النص)، وتجريد width وheight كي تتحجّم لحاويتها، وتغليف المكوّن بـ forwardRef لكشف عقدة <svg> الأساسية.
اختر مُخرَج JavaScript أو TypeScript: يُنمِّط متغيّر TypeScript props كـ React.SVGProps<SVGSVGElement>، ومع تفعيل forwardRef، يستخدم forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. يُصدَر المكوّن كدالة سهم مُصدَّرة (export const Icon = (props) => (...))، باسمك المختار ومسافتك البادئة، جاهزًا للّصق في وحدة أيقونات.