Tentang alat ini
Alat SVG ke Komponen JSX mengubah markup SVG mentah menjadi komponen React yang bersih, seperti yang dilakukan SVGR, tetapi sepenuhnya di browser Anda tanpa ada yang diunggah. Tempel ikon yang diekspor dari alat desain dan dapatkan komponen yang bisa Anda impor dan gayakan. Ia mem-parsing SVG dengan DOMParser dan melaporkan kesalahan yang jelas jika markup salah bentuk.
Setiap atribut SVG bertanda hubung atau bernamespace di-camelCase ke nama React-nya — stroke-width ke strokeWidth, fill-rule ke fillRule, clip-path ke clipPath, stop-color ke stopColor, xlink:href ke xlinkHref, xmlns:xlink ke xmlnsXlink — sementara atribut data-* dan aria-* dibiarkan apa adanya. String gaya inline menjadi objek style, elemen kosong seperti path dan circle ditutup sendiri, dan prop disebarkan ke root <svg {...props}> sehingga komponen tetap dapat dikonfigurasi. Sakelar opsional memungkinkan Anda mengganti nilai fill dan stroke yang di-hardcode dengan currentColor (agar ikon mewarisi warna teks), menghapus width dan height sehingga menskala ke kontainernya, dan membungkus komponen dengan forwardRef untuk mengekspos node <svg> yang mendasarinya.
Pilih output JavaScript atau TypeScript: varian TypeScript mengetik prop sebagai React.SVGProps<SVGSVGElement> dan, dengan forwardRef diaktifkan, menggunakan forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Komponen dihasilkan sebagai arrow function yang diekspor (export const Icon = (props) => (...)), dengan nama dan indentasi pilihan Anda, siap ditempel ke modul ikon.