Output mudah dibaca
Atribut dan struktur dinormalkan untuk markup React.
Semua alat
Alat pembangun
SVG kepada React / JSX
Tukar markup SVG kepada JSX bersih atau komponen React bertipe dengan saiz responsif dan pilihan currentColor.
Privasi sebagai lalai. Pemprosesan berlaku dalam pelayar anda.
- Tambah inputPilih fail, tampal kandungan atau masukkan butiran.
- Pilih tetapanSemak tetapan lalai yang berguna dan ubah jika perlu.
- Simpan hasilSalin atau muat turun hasil yang siap.
Penukar SVG ke React
Tampal markup SVG atau buka fail. Kod anda kekal dalam pelayar ini.
Input SVG
Tampal elemen <svg> yang lengkap
Fail SVG sehingga 2 MB. Skrip, pengendali acara dan sumber luaran tidak selamat akan dibuang.
Output React
Output
Kod sedia React muncul di sini
Tampal markup SVG, lepaskan fail, atau muatkan sampel untuk memulakan.
SVG bersih untuk kod React produksi
Tukar markup SVG mentah kepada JSX atau komponen bertipe yang mudah digunakan.
Kod komponen fleksibel
Pilih JSX atau TSX dengan saiz responsif dan currentColor.
Keperluan penukaran SVG
Bawa aset vektor ke dalam aliran kerja komponen anda.
- Tukar markup SVG kepada JSX atau TSX.
- Gunakan dimensi responsif dan currentColor.
- Salin komponen yang telah dibersihkan.
Soalan lazim
Adakah markup SVG dimuat naik?
Tidak. Penghuraian berlaku dalam pelayar.
Bolehkah TypeScript dijana?
Ya. Pilih TSX untuk komponen React bertipe.
Perlukan sistem frontend yang lebih kukuh?
Kami membina aplikasi React produksi dan pustaka komponen.
Mulakan projek