Vue Svg Sprite Webpack how to set up correctly?

Question

SVG

Good day. I'm trying to figure out how to set up auto-uploading svg in sprite in wepack when they require.
in vue.
What I want:
1) Let's say I have assets / sprite.svg - it is dynamically created by webpack and loaded into Vuejs
2) I have an icons folder in assets - contains icons in svg
3) In Vue I have an Icon component
for example when Icon is called (name="menu")
webpack loader needs to find the icon in assets/icons/menu.svg Add
it to assets/sprite.svg - if it's not there.
and at the output Icon(name="menu") Became svg with a sprite link to menu.svg
Is it possible to do this?

Answer 1

If anyone is interested, everything is solved quite simply:
The trick is that svg can be a lot of things: Fonts\Loaders\Icons
for Fonts and Loaders, I made a regular url-loader
and for icons:

{
        test: /icons\/(-?\w\/?){0,}\.svg(\?.*)?$/,
        use: [{
            loader: 'svg-sprite-loader',
            options: {
              extract: true
            }
          },
          //'svgo-loader'
        ]
      },

+ We hook the plugin in webpack,
then we need to hook the object with svg data in the component

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

and finally make a template

svg(v-once, :viewBox="icon.viewBox", :class="[classIcon]", :style="styles")
  use(:xlink:href="icon.url")

during build there will be a ready-made sprite that clings once, respectively

Answer 2

vue-cli 3 plugin to build a SVG sprite