如何在 Nuxt 应用程序中包含内联 .svg

Question

我想做一件普通的事情——在 Vue Nuxt 应用程序中动态包含一个 svg HTML，我可以设置它的样式。为此，我创建了一个组件，但不是图像，而是文本 data:image/svg+xhtml...。

如何让它发挥作用？

<template>
   <div v-html="src"></div>
</template>
<script>
export default {
    name: 'Icon',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    computed: {
        src() {
            const src = require(`assets/icons/${this.name}.svg`)
            return src
        }
    }
}
</script>

Answer 1

这并不容易，我尝试了一堆“看起来”应该可行的不同解决方案。

我的理解是，它归结为 Webpack 如何处理“图像”资产以及使用它们内联和独立使用它们会改变定义。

我有一个需要代码访问的 SVG 图标库（例如在运行时更改颜色），所以我必须将 SVG 内联。这就是我登陆的地方，它并不理想，但它有效。

---

使用 SVG 名称的 prop 插槽创建一个新组件。在该组件内添加所有 svg 作为代码。将每一个都包装在一个 v-if 中。

<template>
   <div class="svgIcon">
      <svg v-if="icon == 'name1'">...</svg>
      <svg v-if="icon == 'name2'">...</svg>
      <svg v-if="icon == 'name3'">...</svg>
      <svg v-if="icon == 'name4'">...</svg>
   </div>
</template>
<script>
  export default {
    props: ['icon']
  }
</script>

然后通过在插槽中填写你想要的名称来使用组件

<template>
   <div>
      <svgIcons :icon="name1"></svgIcons>
   </div>
</template>
<script>
  import svgIcons from '../path/to/iconsComponent.vue'
  export default {
    components: { svgIcons },
    ...
  }
</script>

Answer 2

看起来@nuxtjs/svg 会做你想做的事。安装后尝试：

<template>
   <div v-html="src"></div>
</template>
<script>
export default {
    name: 'Icon',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    computed: {
        src() {
            const src = require(`assets/icons/${this.name}.svg?raw`)
            return src
        }
    }
}
</script>