SVG → React
JSX sedia tampal daripada mana-mana fail SVG — atribut dinamakan semula mengikut kehendak React, props disebar pada elemen akar, dan TypeScript jika anda perlukan.
atau klik untuk pilih — SVG sahaja
Nama komponen diambil daripada nama fail, jadi arrow-left.svg menjadi ArrowLeft.
Komponen yang sama, ditaip sebagai SVGProps<SVGSVGElement>.
Markupnya sahaja, untuk ditampal ke dalam komponen yang anda sudah ada.
ikon sebagai komponen
JSX nampak seperti markup tetapi sebenarnya JavaScript. Atribut bertanda sempang seperti stroke-width bukan pengecam yang sah, class berlanggar dengan kata simpanan, dan kurungan berkerinting di dalam style sebaris dibaca sebagai ungkapan. SVG yang disalin terus daripada perisian reka bentuk lazimnya gagal dikompil kerana sekurang-kurangnya satu daripada sebab itu.
Penukar ini hanya menamakan semula apa yang wajib dinamakan semula dan membiarkan yang lain. Atribut data- dan aria- mengekalkan sempangnya kerana React menyalurkannya tanpa disentuh — menamakannya semula ialah cara biasa untuk kehilangan label kebolehcapaian tanpa disedari.
tiga langkah
Pilih fail .svg — ia kekal pada peranti anda.
Komponen penuh, kembarnya dalam TypeScript, atau JSX kosong.
Import seperti komponen lain dan gayakan ia melalui props.
jawapan pantas
Supaya apa sahaja yang anda hantar menang. Dalam JSX, atribut yang ditulis kemudian menimpa yang awal, jadi dengan sebaran di kedudukan terakhir anda boleh menetapkan className, width atau onClick dari luar. Kalau diletak di depan, nilai yang terpateri dalam fail akan menimpa milik anda secara senyap.
Gantikan fill atau stroke yang ditulis tetap dalam keluaran itu dengan currentColor, kemudian tetapkan warnanya melalui CSS pada mana-mana elemen induk. Jika warnanya bertaburan pada banyak nod, lalukan fail itu melalui penukar warna SVG dahulu — ia boleh menukar kesemuanya kepada currentColor sekali gus.
Tidak secara langsung. React Native tiada DOM, jadi SVG di sana memerlukan react-native-svg dan nama elemen berhuruf besar seperti Svg dan Path. Cara penamaan semula atribut yang ditunjukkan di sini masih betul, tetapi importnya dan tagnya berbeza.
Itu memang rupa fail sumbernya — SVG yang diminifikasi kekal diminifikasi kerana memformat semula ialah kerja berasingan. Lalukan ia melalui pencantik SVG dahulu, maka komponennya keluar dengan indentasi yang mudah dibaca.
Tidak. Penukaran ini hanyalah kerja rentetan biasa yang dilakukan dalam pelayar anda.