SVG → Vue
Bungkus mana-mana SVG menjadi komponen fail tunggal .vue — atau ambil blok templatnya sahaja untuk komponen yang anda sudah ada.
atau klik untuk pilih — SVG sahaja
Nama komponen diambil daripada nama fail. Blok script hanya menamakan komponen itu — padamkannya jika anda tidak memerlukannya.
Markupnya sahaja, untuk ditampal ke dalam komponen yang anda sudah ada. Jika SVG itu mempunyai elemen style dalaman, CSS-nya berada dalam blok style fail di atas, bukan di sini.
tiada penamaan semula diperlukan
Templat Vue dihurai sebagai HTML, jadi SVG boleh masuk persis seperti ia ditulis. stroke-width kekal stroke-width, class kekal class, dan atribut style dalaman terus berfungsi. Penukaran ini sebahagian besarnya hanyalah soal membungkus fail — sebab itulah keluarannya sangat mirip dengan masukannya.
Selebihnya diuruskan oleh penerusan atribut. Dengan satu elemen akar, apa sahaja yang anda letakkan pada komponen akan mendarat pada tag svg, jadi width, class atau pengendali klik berfungsi tanpa perlu mengisytiharkan satu prop pun.
tiga langkah
Pilih fail .svg — ia kekal pada peranti anda.
Fail .vue penuh, atau templatnya sahaja.
Import seperti komponen lain dan tetapkan saiznya dari luar.
jawapan pantas
Kerana anda memang tidak memerlukannya. Komponen berakar tunggal menyalurkan apa-apa atribut yang anda berikan terus kepada tag svg, jadi width, height, class dan pendengar peristiwa semuanya sudah berfungsi. Isytiharkan props hanya apabila anda mahu mengira sesuatu daripadanya.
Hanya untuk memberi nama kepada komponen, nama yang muncul dalam Vue devtools dan dalam mesej amaran. Tanpanya pun komponen itu dipaparkan sama sahaja, jadi memadamkannya benar-benar selamat.
Ke blok style scoped di bahagian bawah komponen. Vue membuang tag style dan script yang ditemui di dalam templat, jadi SVG yang dieksport daripada Illustrator atau Figma — yang hampir selalu membawa helaian gaya dalaman — akan dipaparkan tanpa sebarang warna. Memindahkan CSS keluar mengekalkan fungsinya, dan scoped memastikan ia tidak bocor ke bahagian lain aplikasi anda.
Gantikan fill atau stroke yang ditulis tetap dengan currentColor dan tetapkan warnanya melalui CSS pada elemen induk. Penukar warna SVG boleh menukar setiap warna dalam fail itu kepada currentColor sebelum anda menukarkannya.
Bagi keluaran ini, ya — script setup dan defineOptions ialah ciri Vue 3. Pada Vue 2, blok templatnya masih boleh digunakan: tampalkannya ke dalam template komponen options API biasa.
Tidak. Penukaran ini hanyalah kerja rentetan biasa yang dilakukan dalam pelayar anda.