Bu araç hakkında
SVG'den JSX Bileşenine aracı, ham SVG işaretlemesini SVGR'nin yaptığı gibi temiz bir React bileşenine dönüştürür, ancak tamamen tarayıcınızda ve hiçbir şey yüklenmeden. Bir tasarım aracından dışa aktarılan bir simge yapıştırın ve içe aktarıp stilleyebileceğiniz bir bileşen alın. SVG'yi DOMParser ile ayrıştırır ve işaretleme hatalıysa açık bir hata bildirir.
Her tireli veya ad alanlı SVG özniteliği React adına camelCase yapılır — stroke-width strokeWidth'e, fill-rule fillRule'a, clip-path clipPath'e, stop-color stopColor'a, xlink:href xlinkHref'e, xmlns:xlink xmlnsXlink'e — data-* ve aria-* öznitelikleri olduğu gibi bırakılır. Satır içi stil dizeleri stil nesneleri olur, path ve circle gibi boş öğeler kendiliğinden kapanır ve bileşenin yapılandırılabilir kalması için props kök <svg {...props}> üzerine yayılır. İsteğe bağlı geçişler, sabit kodlanmış fill ve stroke değerlerini currentColor ile değiştirmenizi (böylece simge metin rengini devralır), kapsayıcısına ölçeklenmesi için width ve height'i çıkarmanızı ve alttaki <svg> düğümünü açığa çıkarmak için bileşeni forwardRef ile sarmanızı sağlar.
JavaScript veya TypeScript çıktısı seçin: TypeScript varyantı props'u React.SVGProps<SVGSVGElement> olarak tipler ve forwardRef etkinken forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>> kullanır. Bileşen, seçtiğiniz ad ve girintiyle dışa aktarılan bir ok fonksiyonu (export const Icon = (props) => (...)) olarak üretilir, bir simge modülüne yapıştırmaya hazırdır.