تبدیل SVG به کامپوننت JSX

Q: ویژگیهای SVG چگونه تبدیل میشوند؟

ویژگیهای دارای خط تیره و namespace با دونقطه به معادلهای React خود camelCase میشوند: stroke-width به strokeWidth، ‏fill-rule به fillRule، ‏xlink:href به xlinkHref. ویژگیهای data-* و aria-* حفظ میشوند. استایلهای درونخطی به شیء style تبدیل میشوند.

Q: چرا propها روی svg اسپرد میشوند؟

اسپرد کردن {...props} روی ریشه به فراخوانکنندهها اجازه میدهد className، ‏width، ‏onClick، برچسبهای aria و هر prop دیگر SVG را به کامپوننت پاس دهند. با فعال بودن forwardRef، یک ref هم به عنصر زیرین فوروارد میشود.

Q: تفاوت بین خروجی JS و TS چیست؟

خروجی TypeScript، propها را بهعنوان React.SVGProps تایپ میکند، و با forwardRef از forwardRef > استفاده میکند. خروجی JavaScript حاشیهنویسیهای نوع را حذف میکند اما در بقیه موارد یکسان است.

درباره این ابزار

ابزار تبدیل SVG به کامپوننت JSX مارک‌آپ خام SVG را به یک کامپوننت تمیز React تبدیل می‌کند، به همان شیوه‌ای که SVGR انجام می‌دهد، اما کاملاً در مرورگر شما و بدون هیچ بارگذاری. یک آیکون export‌شده از یک ابزار طراحی را بچسبانید و کامپوننتی بگیرید که می‌توانید import و استایل‌دهی کنید. SVG را با DOMParser تجزیه می‌کند و اگر مارک‌آپ نامعتبر باشد یک خطای روشن گزارش می‌دهد.

هر ویژگی SVG دارای خط تیره یا namespace‌دار به نام React خود camelCase می‌شود — stroke-width به strokeWidth، ‏fill-rule به fillRule، ‏clip-path به clipPath، ‏stop-color به stopColor، ‏xlink:href به xlinkHref، ‏xmlns:xlink به xmlnsXlink — در حالی که ویژگی‌های data-* و aria-* همان‌طور که هستند رها می‌شوند. رشته‌های style درون‌خطی به شیء style تبدیل می‌شوند، عناصر خالی مانند path و circle خودبسته می‌شوند، و propها روی ریشه <svg {...props}> اسپرد می‌شوند تا کامپوننت قابل پیکربندی بماند. کلیدهای تغییر اختیاری به شما اجازه می‌دهند مقادیر ثابت fill و stroke را با currentColor جایگزین کنید (تا آیکون رنگ متن را به ارث ببرد)، ویژگی‌های width و height را حذف کنید تا به اندازه محفظه‌اش مقیاس بگیرد، و کامپوننت را با forwardRef بپیچید تا گره زیرین <svg> را در دسترس قرار دهد.

خروجی JavaScript یا TypeScript را انتخاب کنید: نوع TypeScript، propها را به‌عنوان React.SVGProps<SVGSVGElement> تایپ می‌کند و با فعال بودن forwardRef از forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>> استفاده می‌کند. کامپوننت به‌عنوان یک arrow function صادرشده تولید می‌شود (export const Icon = (props) => (...))، با نام و تورفتگی انتخابی شما، آماده چسباندن در یک ماژول آیکون.

پرسش‌های پرتکرار

ویژگی‌های SVG چگونه تبدیل می‌شوند؟

ویژگی‌های دارای خط تیره و namespace با دو‌نقطه به معادل‌های React خود camelCase می‌شوند: stroke-width به strokeWidth، ‏fill-rule به fillRule، ‏xlink:href به xlinkHref. ویژگی‌های data-* و aria-* حفظ می‌شوند. استایل‌های درون‌خطی به شیء style تبدیل می‌شوند.

گزینه currentColor چه کاری انجام می‌دهد؟

مقادیر رنگ ثابت fill و stroke (هر چیزی غیر از none) را با "currentColor" جایگزین می‌کند، پس SVG رنگ متن پیرامون را به ارث می‌برد و می‌توان آن را با یک color ساده CSS روی والد رنگ‌آمیزی کرد.

چرا propها روی svg اسپرد می‌شوند؟

اسپرد کردن {...props} روی ریشه <svg> به فراخوان‌کننده‌ها اجازه می‌دهد className، ‏width، ‏onClick، برچسب‌های aria و هر prop دیگر SVG را به کامپوننت پاس دهند. با فعال بودن forwardRef، یک ref هم به عنصر زیرین فوروارد می‌شود.

تفاوت بین خروجی JS و TS چیست؟

خروجی TypeScript، propها را به‌عنوان React.SVGProps<SVGSVGElement> تایپ می‌کند، و با forwardRef از forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>> استفاده می‌کند. خروجی JavaScript حاشیه‌نویسی‌های نوع را حذف می‌کند اما در بقیه موارد یکسان است.

درباره این ابزار

پرسش‌های پرتکرار

ابزارهای بیشتر