Konverter SVG ke JSX

Apa itu Konverter SVG ke JSX?

Konverter SVG ke JSX adalah alat gratis di browser yang mengubah markup SVG biasa menjadi JSX React valid yang bisa kamu tempel langsung ke dalam komponen. React mengharapkan atribut DOM dalam camelCase (strokeWidth, clipPath, fillRule), menggunakan className alih-alih class, dan membutuhkan atribut style sebagai objek properti camelCase alih-alih string — alat ini memperbaiki semua itu secara otomatis. Pengembang front-end dan desainer menggunakannya saat mengekspor ikon dari Figma, Illustrator, atau set ikon. Aktifkan pembersihan opsional untuk membuang komentar, metadata editor, dan deklarasi XML, lalu pilih apakah output berupa JSX inline atau komponen fungsi, memo(), atau forwardRef yang diberi tipe dengan React.SVGProps.

Cara menggunakan Konverter SVG ke JSX

1. Tempel markup SVG kamu ke kotak input, atau jatuhkan berkas .svg ke zona jatuh.
2. Baca JSX hasil konversi di kotak output — atribut menjadi camelCase, class menjadi className, style inline menjadi objek style, dan tag kosong menutup sendiri.
3. Buka Pengaturan dan pilih Output komponen: JSX inline, komponen fungsi, komponen memo(), atau komponen forwardRef.
4. Atur kolom Nama komponen untuk mengontrol nama yang digunakan dalam pembungkus (misalnya MyIcon).
5. Aktifkan Prop TypeScript untuk memberi tipe komponen dengan React.SVGProps, atau aktifkan Bersihkan SVG untuk membuang komentar dan metadata editor lebih dulu.
6. Klik Salin untuk menyalin JSX, lalu tempel ke proyek React atau Next.js kamu.

Contoh

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Pertanyaan yang sering diajukan

Apa yang diubah konverter pada SVG saya?

Ia mengganti nama atribut bertanda hubung dan bernamespace menjadi bentuk camelCase React (stroke-width menjadi strokeWidth, xlink:href menjadi xlinkHref), mengubah class menjadi className, menulis ulang string style inline menjadi objek style JSX dengan kunci camelCase, dan menutup sendiri elemen kosong seperti path dan rect agar menjadi JSX yang valid.

Bagaimana opsi output komponen bekerja?

Pilih JSX inline untuk menempatkan markup di mana saja, atau bungkus sebagai komponen fungsi, memo(), atau forwardRef menggunakan Nama komponen yang kamu masukkan. Komponen forwardRef menerima ref yang dipasang ke svg akar. Aktifkan Prop TypeScript untuk memberi tipe pembungkus mana pun dengan React.SVGProps dan menyebarkan {...props}.

Apakah ia mengonversi gaya inline?

Ya. Atribut style="fill:red;stroke-width:2" ditulis ulang menjadi objek style JSX seperti style={{ fill: "red", strokeWidth: "2" }}, dengan nama properti dalam camelCase dan nilai tetap sebagai string. Properti kustom CSS (--var) dipertahankan sebagai kunci string.

Apa yang dilakukan pembersihan gaya SVGO?

Saat Bersihkan SVG aktif, alat membuang deklarasi XML, DOCTYPE, komentar, <metadata>, namespace editor seperti inkscape: dan sodipodi:, serta atribut version pada svg, lalu meringkas spasi — semua sebelum konversi JSX berjalan.

Apakah SVG saya diunggah ke suatu tempat?

Tidak. Menjatuhkan berkas atau menempel markup menjalankan transformasi string murni sepenuhnya di browser kamu, sehingga SVG kamu tidak pernah dikirim ke server dan alat ini bekerja offline.