⚛️ Konverter SVG ke React JSX

Tempel markup SVG untuk mengubahnya menjadi JSX yang bisa langsung dipakai di komponen React. Atribut diubah ke camelCase (class→className), string style menjadi object, dan komentar serta DOCTYPE dihapus.

Input SVG

Output React JSX

Lebih banyak alat developer

🎨 Kompiler LESS ke CSS 🖼️ Konverter Gambar Base64 🔠 Konverter Case

PANDUAN

Pelajari lebih lanjut

1. Mengapa mengonversi SVG ke JSX

Sintaks React (JSX) sedikit berbeda dari HTML/SVG. Atribut dengan tanda hubung (stroke-width) harus diubah ke camelCase (strokeWidth), class menjadi className, dan style harus berupa object JavaScript, bukan string. Alat ini mengonversi perbedaan tersebut secara otomatis, sehingga ikon SVG dari desainer bisa langsung ditempel ke komponen React.

2. Aturan konversi

Alat ini memetakan class→className dan for→htmlFor, mengubah atribut bertanda hubung seperti stroke-width dan fill-opacity menjadi camelCase, mengonversi atribut bernamespace seperti xlink:href menjadi xlinkHref, dan membiarkan atribut data-/aria- apa adanya. style="fill:red;stroke-linecap:round" menjadi object style={{ fill: 'red', strokeLinecap: 'round' }}, sementara komentar, DOCTYPE, dan deklarasi XML dihapus.

3. Konversi aman berbasis DOMParser

Alih-alih regex, alat ini benar-benar mengurai SVG dengan DOMParser bawaan browser lalu menyerialisasinya ulang, sehingga struktur bertingkat dan atribut ditangani dengan benar. Semuanya berjalan di browser Anda dan kode tidak pernah dikirim ke server. Setelah hasilnya ditempel ke komponen, sesuaikan seperlunya — misalnya pindahkan width/height ke props atau ubah fill menjadi "currentColor".

Pertanyaan umum

Apakah output bisa langsung dipakai di React?

Ya. Tempel JSX-nya di dalam return komponen Anda. Opsional, pindahkan ukuran dan warna ke props agar lebih reusable.

Apakah string style juga dikonversi?

Ya. String seperti style="a:b;c:d" menjadi object style={{ a: 'b', c: 'd' }} dengan nama properti CSS dalam camelCase.

Apakah SVG saya dikirim ke server?

Tidak. Konversi berjalan sepenuhnya di browser Anda dan kode tidak pernah dikirim ke server.

Apakah alat ini memakai library seperti svgr?

Tidak. Implementasinya langsung memakai DOMParser bawaan browser, tanpa library eksternal.