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

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

Apa Saja yang Ditangani oleh Konverter

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.