Konverter SVG ke React/JSX

Konverter SVG ke React/JSX MiniWebtool mengubah SVG yang ditempel atau diunggah menjadi komponen React. Atur props TypeScript, forwardRef, memoization, dan penanganan judul, dengan konversi atribut dan gaya dalam kode yang dihasilkan.

Belum tahu cara menggunakannya? Tanya AI

Gemini (salin dan buka)

Di Gemini, tempelkan pertanyaan yang disalin ke chat. Anda juga dapat menyalinnya di bawah.

Lihat pertanyaan

Saya ingin memahami cara menggunakan alat Konverter SVG ke React/JSX dari MiniWebtool: https://miniwebtool.com/id/konverter-svg-ke-react-jsx/. Apa kegunaannya, masukan atau pengaturan apa yang diperlukan, dan bagaimana cara menggunakan alat ini serta memahami hasilnya? Jelaskan dengan satu contoh sederhana langkah demi langkah. Gunakan halaman ini sebagai sumber dan jawab dalam bahasa Indonesia.

Gratis 3× per hariTidak 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.

Sekilas

Konverter SVG ke React/JSX mengubah markup SVG yang ditempelkan atau berkas .svg yang diunggah menjadi komponen React. Alat ini menulis ulang atribut ke bentuk JSX dan menawarkan keluaran TypeScript, forwardRef, serta React.memo.

Konverter SVG ke React/JSX: fitur sekilas
Fitur	Yang didapat	Cocok untuk
Tempel atau unggah	Tempelkan markup SVG ke editor atau unggah berkas .svg UTF-8.	Mengubah berkas ikon dan logo menjadi komponen
Konversi atribut	Atribut SVG seperti stroke-width, fill-rule, dan clip-path menjadi strokeWidth, fillRule, dan clipPath; class menjadi className.	Menghindari penyuntingan setiap atribut secara manual
Objek gaya	String gaya sebaris dikonversi menjadi objek gaya JSX dengan nama properti CSS camelCase.	SVG yang diekspor dengan gaya sebaris
Opsi komponen	Atur nama komponen, pilih ekspor default atau bernama, dan secara opsional tambahkan props TypeScript, forwardRef, React.memo, serta penyebaran prop.	Pustaka ikon sistem desain dan proyek TypeScript
Prop judul	Dukungan judul opsional menambahkan judul aksesibel ke SVG melalui prop.	Ikon bermakna yang perlu diumumkan pembaca layar
Pembersihan keamanan	Aktif secara bawaan: menghapus tag script, penangan peristiwa sebaris, dan tautan javascript: dari kode yang dihasilkan.	Meninjau SVG dari sumber luar

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

Mengobrol dengan AI favorit Anda