using svg sprite with vue storybook

You can use require(). Just make sure you don't parameterize its whole args (I mean, leave the folder and extension as hardcoded strings).

In the example below, WebPack will load all .svg files of the /assets folder (because they may be requested during runtime).

<template>    <svg class="icon">        <use :xlink:href="src"></use>    </svg></template><script>export default {  name: "AqIcon",  props: ['icon'],  computed: {    src() {      return require('../assets/' + this.icon + '.svg')    }  }};</script>

Include an SVG sprite in your markup by making it it's own Vue component. In my case I put the SVG sprite component in App.vue.

App.vue:

<template>  <div class="body">      <YourOtherComponents />      <SvgSprite />  </div></template><script>import YourOtherComponents from './Components/YourOtherComponents.vue';import SvgSprite from './Components/SvgSprite.vue';export default {  name: 'App',  components: {    YourOtherComponents,    SvgSprite,  },};</script>

SvgSprite.vue:

<template>  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">    <symbol id="arrow-left" viewBox="0 0 24 24">      <polyline points="15 18 9 12 15 6"></polyline>    </symbol>    <symbol id="arrow-right" viewBox="0 0 24 24">      <polyline points="9 18 15 12 9 6"></polyline>    </symbol>  </svg></template><script>export default {  name: 'SvgSprite',};</script>

This way you can the svgs just as if the sprite was inline in your project's index.html file. It's just cleaner.