Cara menggunakan SVG ke JSX Converter
- Tempel markup SVG kamu, buka file
.svg, atau klik Contoh. - Atur nama komponen dan opsinya: TypeScript, props spread, menghapus ukuran tetap, atau mengganti warna menjadi
currentColor. - Periksa pratinjau yang sudah disanitasi untuk memastikan ikonnya tampil dengan benar.
- Salin komponennya atau unduh sebagai file
.jsx/.tsx, lalu impor ke proyek React atau Next.js kamu.
Mengapa SVG perlu diubah untuk React
SVG adalah XML, sedangkan JSX adalah JavaScript yang hanya terlihat seperti HTML. Jika SVG mentah langsung ditempel ke komponen React, biasanya muncul peringatan seperti “Invalid DOM property stroke-width. Did you mean strokeWidth?” atau error build untuk atribut berprefiks seperti xlink:href dan inkscape:label. Converter ini menulis ulang markup menjadi JSX yang valid dan membungkusnya dalam sebuah komponen.
Apa saja yang dikonversi
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* dan aria-* | Dibiarkan apa adanya (React memakai tanda hubung di sini) |
<?xml?>, <!DOCTYPE>, komentar, <metadata>, atribut editor (Inkscape, Sodipodi, Sketch) | Dihapus |
onclick dan handler inline lainnya, <script> | Dihapus — handler berbentuk string tidak valid di React |
Membuat ikon lebih fleksibel
Jika opsi Spread props diaktifkan, komponen akan diakhiri dengan {...props} pada <svg>, sehingga kamu bisa meneruskan className, width, aria-label, atau event handler: <HeartIcon className="h-6 w-6" />. Opsi Hapus width/height membiarkan CSS mengatur ukuran ikon (viewBox akan ditambahkan dari ukuran lama jika belum ada). Warna → currentColor mengganti fill dan stroke agar ikon mewarisi warna teks, sangat cocok untuk kumpulan ikon satu warna. Opsi TypeScript akan menulis tipe props sebagai SVGProps<SVGSVGElement>.
Aksesibilitas
Untuk ikon dekoratif di samping teks, tambahkan aria-hidden="true". Untuk ikon mandiri yang punya makna, pertahankan <title> atau berikan role="img" dengan aria-label.
Privasi dan keamanan
Konversi berjalan sepenuhnya di browser kamu, jadi SVG tidak pernah meninggalkan perangkatmu. Pratinjaunya sudah disanitasi: script, foreignObject, handler event inline, dan referensi eksternal dihapus sebelum dirender. Sedang membangun alur kerja berbasis bundle? Tools seperti SVGR melakukan hal serupa saat build; halaman ini cocok untuk ikon satu-satu yang cepat. Jika ingin memakai SVG sebagai background CSS, coba SVG ke CSS.
Juga dicari sebagai: svg ke jsx, svg ke react, svg ke tsx, komponen react svg, konverter jsx online, svgr online, ikon svg react, classname react.
Tool yang cocok dipakai bersama SVG ke JSX Converter
- HTML ke Markdown — Tempel HTML, atau salin rich text langsung dari halaman web, Google Doc, atau email, lalu dapatkan Markdown yang rapi untuk README, wiki, atau static site kamu.
- JSON ke TypeScript — Tempel contoh JSON, misalnya respons API atau file konfigurasi, lalu dapatkan interface TypeScript siap pakai lengkap dengan tipe bersarang, properti opsional, dan union type.
- Gambar ke Base64 — Ubah PNG, JPEG, SVG, WebP atau GIF menjadi data URI Base64 dengan CSS dan HTML yang siap disalin, atau tempel string Base64 untuk melihat pratinjau dan mengunduh gambarnya.
- Formatter HTML — Tempel markup yang berantakan atau sudah di-minify, lalu dapatkan HTML rapi dengan indentasi konsisten — termasuk blok <style> dan <script> di dalamnya.
Pertanyaan yang sering diajukan
Kenapa React memberi peringatan “Invalid DOM property class”?
class adalah kata yang dicadangkan di JavaScript, jadi React memakai className. Hal yang sama berlaku untuk atribut SVG dengan tanda hubung, yang harus diubah ke camelCase (stroke-width → strokeWidth). Tool ini mengonversinya secara otomatis.Sebaiknya pakai xlinkHref atau href?
href biasa dari SVG 2, dan xlink:href sudah deprecated. React masih menerima xlinkHref, jadi kode hasil konversi tetap berfungsi. Kamu bisa beralih ke href jika tidak perlu mendukung browser yang sangat lama.Bagaimana cara mengubah warna ikon dengan CSS?
color dari elemen induknya, jadi className="text-red-500" atau style={{ color: "red" }} akan mengubah warnanya.Apakah hasilnya bisa dipakai di Next.js dan Vite?
Apakah bisa dipakai di React Native?
react-native-svg, yang memakai komponen berawalan huruf kapital seperti <Svg> dan <Path>. Atribut camelCase dari tool ini adalah titik awal yang baik, tetapi nama elemennya perlu kamu ubah.