Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Konverter SVG ke Komponen React JSX

PengembangTeks

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Konverter SVG ke Komponen React JSX

Tempel markup SVG mentah dan dapatkan kembali komponen fungsi React yang bersih. Alat ini menerapkan konversi camelCase yang deterministik untuk setiap atribut, menghilangkan sintaks non-JSX, dan mengelompokkan hasilnya dalam komponen siap diimpor — opsional terjenis, opsional forwardRef-dilindungi, dan opsional diubah ukuran melalui properti. Semua hal berjalan secara lokal di browser Anda, sehingga ikon dan logo Anda tidak pernah meninggalkan mesin Anda.

Cara Penggunaan

Tempel <svg>…</svg> markup ke kotak masukan.
Tetapkan nama komponen (PascalCase, seperti ArrowRightIcon).
Toggle TypeScript, forwardRef, properti ukuran skala, dan penyebaran properti untuk sesuai dengan proyek Anda.
Salin JSX yang dihasilkan atau unduh sebagai .tsx / .jsx file.

Fitur

atribut camelCase – stroke-width menjadi strokeWidth, fill-rule menjadi fillRule, dan seterusnya di seluruh spesifikasi SVG.
Pengelolaan kata kunci yang disimpan – class diterjemahkan menjadi className, for ke htmlFordan xlink:href ke xlinkHref.
Parsa gaya inline – style="color: red; font-size: 12px" dikonversi menjadi objek gaya JSX dengan kunci camelCase.
Output TypeScript – menghasilkan React.SVGProps<SVGSVGElement> tipe saat diaktifkan.
Mode ikon skala – ganti dimensi hard-coded width/height dengan width dan height properti dengan nilai default yang masuk akal.
Wrapper React.forwardRef – menghasilkan sebuah React.forwardRef komponen dengan sebuah displayName untuk DevTools.
Penyebaran properti – menyalurkan properti sembarang ke akar <svg> sehingga konsumen dapat menetapkan className, ARIA, atau penanggulang peristiwa.
Offline secara dirancang – SVG tidak pernah meninggalkan browser; tidak ada pengunggahan, tidak ada perjalanan ke server.

 Tanya Jawab Umum

Mengapa React dan JSX mengubah nama atribut SVG?

JSX dikompilasi langsung ke akses properti objek JavaScript, dan identifikasi JavaScript tidak dapat mengandung garis bawah. Oleh karena itu, React menggunakan nama properti camelCase yang standar yang mencerminkan DOM IDL — misalnya, stroke-width menjadi strokeWidth karena DOM mengungkapkannya sebagai element.strokeWidth. Sejumlah kecil atribut (class, for) bertabrakan dengan kata kunci JavaScript dan diubah (className, htmlFor) untuk menghindari konflik parser.
Apa yang dilakukan oleh React.forwardRef terhadap komponen SVG?

Secara default, komponen fungsional tidak dapat menerima sebuah ref dari orang tua — React mengabaikannya secara diam-diam. React.forwardRef mengungkapkan node DOM bawah ke orang tua, yang penting ketika Anda membutuhkan akses langsung ke elemen yang dihasilkan <svg> untuk manajemen fokus, pengukuran, atau integrasi dengan library animasi seperti Framer Motion atau GSAP.
Mengapa SVG harus dimasukkan sebagai komponen React daripada gambar inline?

Memasukkan SVG sebagai JSX memberi Anda kendali penuh atas pohon DOM: Anda dapat mengatur stroke dan fill melalui variabel CSS, menganimasikan jalur secara individual, mengganti warna secara dinamis, dan menghapus ikon yang tidak digunakan saat build. Sebuah <img src="icon.svg"> berperilaku sebagai elemen raster yang tidak transparan — Anda tidak dapat mengatur bagian dalamnya dari halaman host.
Mengapa tetapkan width dan height sebagai properti daripada atribut yang diatur secara keras?

Dimensi piksel yang diatur secara keras membatasi ukuran ikon pada satu ukuran dan membuatnya tidak nyaman untuk digunakan dalam komposisi layout. Menyediakan width dan height sebagai properti (sering kali dikombinasikan dengan nilai asli viewBox) memungkinkan pengguna merender komponen yang sama pada 16px di toolbar dan 48px di banner utama, dengan skala vektor SVG yang mempertahankan kejernihan pada setiap ukuran.