SVG to JSX
Convert SVG markup into clean React JSX or TSX components
Letakkan file .svg di sini
File SVG hingga 5 MB.
Anda juga dapat menempel dari clipboard.
PascalCase, misalnya ArrowRightIcon.
Opsi lainnya
Menghapus komentar dan teks berisi spasi saja di antara elemen. Ini pembersihan aman, bukan pengoptimal SVG lengkap.
Matikan untuk ikon dekoratif: title, desc, role, dan atribut ARIA dihapus lalu aria-hidden ditambahkan.
Mengganti title root dan menambahkan role="img".
Tempel markup SVG atau unggah file untuk melihat pratinjau.
Fungsi SVG to JSX
SVG to JSX mengubah markup SVG menjadi komponen React atau elemen JSX biasa. Atribut dipetakan ke nama React (class → className, stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, xlink:href → xlinkHref), string style inline menjadi objek style, dan viewBox selalu dipertahankan agar ikon tetap terskala dengan benar.
Cara menggunakan
- 1.Tempel markup SVG, letakkan atau pilih file .svg, atau muat contoh.
- 2.Periksa pratinjau tersanitasi dan daftar item tidak aman yang dihapus.
- 3.Atur nama komponen lalu pilih keluaran JSX atau TSX.
- 4.Aktifkan pembungkus, penerusan props, penghapusan width/height, dan currentColor sesuai kebutuhan.
- 5.Salin kode atau unduh sebagai file .jsx atau .tsx.
Penjelasan opsi
Penerusan props meneruskan className, ukuran, dan props event dari komponen ke <svg> root; TSX menambahkan tipe SVGProps<SVGSVGElement>. Menghapus width dan height membuat CSS mengatur ukuran melalui viewBox. currentColor mengganti warna solid fill dan stroke sehingga ikon mengikuti warna teks, sementara none, transparent, gradien (url(...)), dan variabel CSS tidak diubah. Rapikan spasi menghapus komentar dan teks berisi spasi saja di antara elemen; ini pembersihan aman, bukan pengoptimal SVG lengkap. Matikan atribut aksesibilitas untuk ikon dekoratif agar title, desc, role, dan ARIA dihapus serta aria-hidden ditambahkan, atau isi judul untuk memberi label ikon bermakna dengan role="img".
Keamanan dan batasan
Setiap input disanitasi sebelum pratinjau dan konversi: <script>, <foreignObject>, event handler seperti onclick, URL javascript:, referensi gambar atau sumber eksternal, dan elemen yang tidak didukung dihapus lalu dilaporkan. Deklarasi DOCTYPE dan entity XML ditolak. Pratinjau hanya merender markup tersanitasi sebagai gambar, sehingga tidak ada isi SVG yang dapat dijalankan. Teks SVG dibatasi 5 MB. Karena elemen yang tidak didukung dibuang, bandingkan pratinjau dengan aslinya saat mengonversi ilustrasi kompleks.
