如何在 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

似乎@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>

Answer 2

这并不容易，我尝试了很多不同的解决方案，“看起来”它们应该有效。

我的理解是，这取决于 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>