Vue Svg Sprite Webpack как настроить правильно?

Question

[ChoasEmptiness]

Доброго времени суток. Пытаюсь разобратся как в wepack настроить автовыгрузку svg в sprite при их require.
в vue.
Что хочу:
1) Допусим у меня есть assets/sprite.svg - он динамически создается webpack и подкгружается в Vuejs
2)У меня в assets есть папка icons - содержит иконки в svg
3) В Vue у меня есть компонент Icon
например при вызове Icon(name="menu")
нужно чтобы loader webpack нашел икноку в assets/icons/menu.svg
Добавил его к assets/sprite.svg - если его там нет.
а на выходе Icon(name="menu") Стал svg с линком спрайта на menu.svg

Реально ли так сделать?

Comments

[ChoasEmptiness]

Сейчас у меня это работает без спрайтов - тоесть при Icon(name="menu") выгружает целый svg постоянно.

[ChoasEmptiness]

что появляются мысли - писать свой loader для webpack

Answer 1

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

Answer 2

[Александр]

vue-cli 3 plugin to build a SVG sprite