Konverter SVG ke React/JSX

Konversi kode SVG yang ditempel atau diunggah menjadi komponen React JSX yang bersih dengan atribut camelCase, prop TypeScript opsional, forwardRef, React.memo, aksesibilitas judul, konversi objek gaya, dan output yang telah disanitasi.

Gratis digunakanTidak perlu mendaftarHasil instan

Konverter SVG ke React/JSXCoba sekarang — gratis ▼

Sumber SVG

Tempelkan elemen <svg> yang lengkap. Server menerima hingga 220000 karakter.

Unggah file .svg

Mengunggah file akan mengisi editor untuk pratinjau, kemudian file yang diunggah akan digunakan saat Anda mengonversi.

Input <svg>

Normalisasi camelCase

React {...props}

Output Komponen

Elemen 0

Atribut 0

ViewBox -

Nama komponen

Gunakan PascalCase, misalnya AlertIcon, BrandMark, atau LogoGlyph.

Pengaturan output

Gaya ekspor

Penanganan inline style

Props TypeScript Dukungan forwardRef Bungkus dengan React.memo Prop title yang aksesibel Sanitasi script dan handler Gunakan ukuran ikon 1em Tambahkan {...props}

Embed Konverter SVG ke React/JSX Widget

Tentang Konverter SVG ke React/JSX

Konverter SVG ke React JSX mengubah file SVG mentah menjadi komponen React yang dapat digunakan kembali. Alat ini dirancang untuk para pengembang yang membutuhkan komponen ikon, tanda merek, ilustrasi produk, dan aset sistem desain yang lebih bersih tanpa harus memperbaiki setiap atribut SVG secara manual. Tempelkan markup SVG or unggah file .svg berformat UTF-8, pilih opsi React yang Anda butuhkan, lalu salin komponen yang dihasilkan ke dalam proyek Anda.

Cara Menggunakan

Tempel atau unggah SVG. Tempelkan file SVG lengkap ke dalam editor atau unggah file .svg dengan format UTF-8.
Beri nama komponen. Masukkan nama komponen React dalam format PascalCase, seperti AlertIcon atau BrandMark.
Choose React options. Pilih opsi TypeScript, forwardRef, React.memo, aksesibilitas title, konversi style, sanitasi, dan penyebaran prop.
Konversi ke JSX. Klik Konversi ke Komponen React untuk menghasilkan kode JSX yang siap disalin.
Tinjau dan salin. Tinjau ringkasan konversi, peringatan, dan kode yang dihasilkan sebelum menyalinnya ke dalam proyek React Anda.

Apa Saja yang Ditangani oleh Konverter

Pembersihan atribut ReactAtribut SVG umum seperti stroke-width, fill-rule, dan clip-path ditulis ulang menjadi strokeWidth, fillRule, dan clipPath.

Ergonomi komponenOpsi seperti {...props}, forwardRef, React.memo, ekspor default, ekspor bernama, dan props TypeScript membuat output lebih mudah dimasukkan ke dalam basis kode React.

Peninjauan output yang lebih amanSanitasi menghapus tag script, inline event handler, dan tautan javascript: secara default sehingga JSX yang dihasilkan lebih aman untuk diperiksa sebelum digunakan.

Tips untuk Komponen SVG React yang Lebih Baik

Pertahankan viewBox asli sebisa mungkin, karena atribut ini mengontrol bagaimana SVG diskalakan. Untuk sistem ikon, pengaturan width="1em" dan height="1em" memungkinkan ikon mewarisi ukuran teks sambil tetap mengizinkan pemanggil untuk mengubah dimensinya menggunakan props. Gunakan nama komponen PascalCase yang deskriptif, jaga agar SVG dekoratif tetap aksesibel dengan aria-hidden jika diperlukan, dan gunakan prop title untuk ikon bermakna yang menyampaikan informasi.

FAQ

Apa saja yang diubah oleh konverter SVG ke React ini?

Alat ini mengurai XML SVG dan menulis ulang atribut SVG menjadi JSX yang ramah React, termasuk className, atribut SVG dalam bentuk camelCase, objek style opsional, props, forwardRef, aksesibilitas title, dan sintaks ekspor.

Apakah saya bisa mengunggah file SVG?

Ya. Anda dapat mengunggah file .svg berformat UTF-8 atau menempelkan markup SVG. File yang diunggah akan dibaca sebagai teks dan dikonversi menjadi JSX di server.

Apakah alat ini menyanitasi kode SVG?

Sanitasi diaktifkan secara default. Konverter ini menghapus tag script, inline event handler, dan tautan javascript: agar komponen yang dihasilkan lebih aman untuk ditinjau sebelum digunakan.

Mengapa atribut style dikonversi menjadi objek?

React mengharapkan prop style dalam bentuk objek saat menulis JSX. Mengonversi string style menjadi objek membuat output dapat dikompilasi dengan bersih dan menjaga nama properti CSS tetap dalam bentuk camelCase.

Apa format nama komponen yang terbaik?

Gunakan PascalCase seperti AlertIcon or BrandMark. Konverter ini akan membersihkan karakter yang tidak valid dan memastikan hasilnya dimulai dengan pengidentifikasi komponen React yang valid.

Kutip konten, halaman, atau alat ini sebagai:

"Konverter SVG ke React/JSX" di https://MiniWebtool.com/id/konverter-svg-ke-react-jsx/ dari MiniWebtool, https://MiniWebtool.com/

oleh tim MiniWebtool. Diperbarui: 2026-05-22