Если кому интересно все решается достаточно просто:
Фишка в том что svg может быть много чего: Fonts\Loaders\Icons
для Fonts и Loaders я сделал обычный url-loader
а для icons:
{
test: /icons\/(-?\w\/?){0,}\.svg(\?.*)?$/,
use: [{
loader: 'svg-sprite-loader',
options: {
extract: true
}
},
//'svgo-loader'
]
},
+ Цепляем плагин в webpack
далее нужно подцепить в компоненте объект с данными по svg
import Vue from 'vue'
import Component from 'vue-class-component'
declare var require: any
@Component({
components: {
},
props: {
src: {
type: String,
required: true
},
classIcon: {
type: String,
required: false,
default: "nulled-icon"
},
width: {
type: String,
required: false
},
height: {
type: String,
required:false,
//default: "15px"
}
}
})
class IconElement extends Vue {
name: string = "IconElement"
height?: string;
width?: string;
src: string;
classIcon: string;
icon: any;
get styles() {
let styles: any = {}
if(this.height) {
styles.height = this.height
}
if(this.width) {
styles.width = this.width
}
return styles
}
created(){
this.icon = require(`@assets/icons/${this.src}.svg`).default
}
}
export default IconElement
и под конец сделать шаблон
svg(v-once, :viewBox="icon.viewBox", :class="[classIcon]", :style="styles")
use(:xlink:href="icon.url")
при build будет готовый спрайт который цепляется один раз соответственно
