ChoasEmptiness

Если кому интересно все решается достаточно просто:
Фишка в том что 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 будет готовый спрайт который цепляется один раз соответственно