SVG → React
JSX siap tempel dari berkas SVG mana pun — atribut diganti nama sesuai keinginan React, props disebar ke elemen akar, dan TypeScript bila Anda perlukan.
atau klik untuk memilih — hanya SVG
Nama komponen diambil dari nama berkas, jadi arrow-left.svg menjadi ArrowLeft.
Komponen yang sama, bertipe SVGProps<SVGSVGElement>.
Hanya markupnya, untuk ditempel ke dalam komponen yang sudah Anda punya.
ikon sebagai komponen
JSX terlihat seperti markup, padahal itu JavaScript. Atribut bertanda hubung seperti stroke-width bukan pengenal yang sah, class bentrok dengan kata terpesan, dan kurung kurawal di dalam style sebaris dibaca sebagai ekspresi. SVG yang disalin langsung dari perangkat desain biasanya gagal dikompilasi karena setidaknya salah satu alasan itu.
Konverter ini hanya mengganti nama yang memang harus diganti dan membiarkan sisanya. Atribut data- dan aria- tetap memakai tanda hubung, karena React meneruskannya apa adanya — mengganti namanya adalah cara yang lazim untuk kehilangan label aksesibilitas tanpa disadari.
tiga langkah
Pilih berkas .svg — berkasnya tetap di perangkat Anda.
Komponen utuh, kembarannya dalam TypeScript, atau JSX polosnya.
Impor seperti komponen lain dan atur gayanya lewat props.
jawaban singkat
Supaya apa pun yang Anda oper menang. Di JSX, atribut yang ditulis belakangan menimpa yang lebih awal, jadi dengan sebaran di posisi terakhir Anda bisa menetapkan className, width, atau onClick dari luar. Bila ditaruh di depan, nilai yang tertanam di berkas justru diam-diam menimpa milik Anda.
Ganti fill atau stroke yang tertulis tetap di keluarannya dengan currentColor, lalu atur warnanya lewat CSS pada elemen induk mana pun. Jika warnanya tersebar di banyak simpul, lewatkan dulu ke pengubah warna SVG — alat itu bisa mengganti semuanya menjadi currentColor sekaligus.
Tidak secara langsung. React Native tidak punya DOM, jadi SVG di sana memerlukan react-native-svg dan nama elemen berhuruf besar seperti Svg dan Path. Pola penggantian nama atribut di sini tetap benar, tetapi impor dan tag-nya berbeda.
Itu memang bentuk berkas sumbernya — SVG yang sudah diminifikasi tetap diminifikasi, sebab merapikan format adalah pekerjaan terpisah. Lewatkan dulu ke perapi SVG, maka komponennya keluar dengan indentasi yang mudah dibaca.
Tidak. Konversinya hanyalah pengolahan teks biasa yang dilakukan di browser Anda.