将 svg sprite 与 vue 故事书一起使用

Question

我已经使用最新的Vue CLI创建了一个应用程序。

我正在使用vue-storybook生成样式指南。

我在名为icons.svg 的资产下有一个SVG Sprite 文件，我想创建一个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但找不到它，我尝试了所有类型的网址，但似乎无法找出正确的网址。

另外，我怎样才能让它动态？

Answer 1

您可以使用require(). 只要确保你没有参数化它的整个 args（我的意思是，将文件夹和扩展名保留为硬编码字符串）。

在下面的示例中，WebPack 将加载.svg文件/assets夹的所有文件（因为它们可能在运行时被请求）。

<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>