Vue.js SVG component Kullanımı

Vue.js içerisinde html template üzerinde svg’leri direk kullandığımızda ortaya aşağıdaki gibi kirli ve yönetilemez bir kod çıkıyor. Projede svg sayıları artmaya başladığında dosyalar gereksiz uzuyor, kod içerisinde kaybolmaya yol açıyor.

Bu duruma çözüm olarak direkt bir vue component gibi svg dosyalarınızı çağırabilirsiniz.

Kurulum:

Öncelikle projede vue-svg-loader yok ise yüklememiz ardından vue.config dosyamızı aşağıdaki gibi güncellememiz gerekiyor.

ardından aşağıdaki gibi bir dosya yapısı oluşturuyoruz.

BaseIcon.vue dosyamızın içeriğini aşağıdaki gibi güncelliyoruz.

tanımladığımız icons ismindeki değişkene projede çağırmak istediğimiz svg dosyalarını manuel olarak veriyor, component’in almış olduğu name parametresi ile eşleşeni bir component olarak geri dönüyoruz.

Fakat burada her bir svg için icons değişkenine her seferinde ekleme yapmak zorundayız. Bu uzun vadede biraz can sıkabilir :) bunun için de klasörü otomatik olarak tarayıp load eden scripti kullanabiliriz.

Bir sonraki yazımda görüşünceye dek hepinize iyi kodlamalar dilerim :)