svg - vueストーリーブックでsvgスプライトを使用する

Question

最新のVue CLIを使用してアプリを作成しました。

スタイルガイドを生成するためにvue- storybook を使用しています。

私はicons.svgというアセットの下にSVGスプライトファイルを持っています。アイコンの名前を受け入れてスプライトから表示するIcon.vueコンポーネントを作成したいと思います。

コンポーネントは次のようになります。

//currently the href is hardcoded for testing purposes, 
//later on it would be passed as a property
<template>
    <svg class="icon">
        <use xlink:href="../assets/icons.svg#icon-compliance"></use>
    </svg>
</template>

<script>
export default {
  name: "AqIcon"
};
</script>

<style scoped>
.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  fill: red;
}
</style>

そして、それを表示する簡単なストーリーがあります：

storiesOf("Icon", module).add("Icon", () => ({
  components: { AqIcon },
  template: "<AqIcon />"
}));

問題は、ブラウザがロードしようとして http://localhost:6006/assets/icons.svg見つからないことです。すべての種類の URL を試しましたが、正しい URL を見つけられないようです。

また、どうすれば動的にできますか？