SVG → Vue
Bungkus SVG apa pun menjadi komponen berkas tunggal .vue — atau ambil blok templatnya saja untuk komponen yang sudah Anda punya.
atau klik untuk memilih — hanya SVG
Nama komponen diambil dari nama berkas. Blok script hanya memberi nama pada komponen — hapus saja bila Anda tidak memerlukannya.
Hanya markupnya, untuk ditempel ke dalam komponen yang sudah Anda punya. Jika SVG-nya memuat elemen style sebaris, CSS-nya ada di blok style pada berkas di atas, bukan di sini.
tanpa perlu ganti nama
Templat Vue diurai sebagai HTML, jadi SVG bisa masuk persis seperti aslinya ditulis. stroke-width tetap stroke-width, class tetap class, dan atribut style sebaris tetap bekerja. Konversinya sebagian besar hanyalah soal membungkus berkas — itulah sebabnya keluarannya begitu mirip dengan masukannya.
Sisanya diurus oleh penerusan atribut. Dengan satu elemen akar, apa pun yang Anda pasang pada komponen akan mendarat di tag svg, sehingga width, class, atau penangan klik bekerja tanpa perlu mendeklarasikan satu prop pun.
tiga langkah
Pilih berkas .svg — berkasnya tetap di perangkat Anda.
Berkas .vue utuh, atau templatnya saja.
Impor seperti komponen lain dan atur ukurannya dari luar.
jawaban singkat
Karena Anda memang tidak memerlukannya. Komponen berakar tunggal meneruskan atribut apa pun yang Anda berikan langsung ke tag svg, jadi width, height, class, dan pendengar peristiwa semuanya sudah bekerja. Deklarasikan props hanya bila Anda ingin menghitung sesuatu darinya.
Hanya untuk memberi nama pada komponen, yang muncul di Vue devtools dan pada pesan peringatan. Tanpa itu pun komponennya dirender sama persis, jadi menghapusnya sepenuhnya aman.
Ke blok style scoped di bagian bawah komponen. Vue membuang tag style dan script yang ditemukan di dalam templat, jadi SVG hasil ekspor Illustrator atau Figma — yang hampir selalu membawa lembar gaya sebaris — akan terender tanpa warna sama sekali. Memindahkan CSS-nya keluar membuatnya tetap bekerja, dan scoped memastikan ia tidak bocor ke bagian lain aplikasi Anda.
Ganti fill atau stroke yang tertulis tetap dengan currentColor lalu atur warnanya lewat CSS pada elemen induk. Pengubah warna SVG bisa mengganti semua warna di dalam berkas menjadi currentColor sebelum Anda mengonversinya.
Untuk keluaran ini, ya — script setup dan defineOptions adalah fitur Vue 3. Di Vue 2, blok templatnya tetap bisa dipakai: tempel saja ke dalam template komponen options API biasa.
Tidak. Konversinya hanyalah pengolahan teks biasa yang dilakukan di browser Anda.