Html 如何在Nuxt应用程序中包含inline.svg

我想做一件普通的事情——在Vue Nuxt应用程序中动态地包含一个svg HTML，我将能够对其进行样式设置。为此，我创建了一个组件，但没有创建图像，而是得到一个文本数据：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>

导出默认值{
名称：'图标'，
道具：{
姓名：{
类型：字符串，
必填项：true
}
},
计算：{
src（）{
const src=require（`assets/icons/${this.name}.svg`）
返回src
}
}
}

这并不容易，我尝试了一系列不同的解决方案，“似乎”它们应该会奏效

我的理解是，Webpack是如何处理“图像”资产的，并将其内联使用还是独立使用，这在某种程度上改变了定义

我有一个SVG图标库，需要代码访问（例如在运行时更改颜色），因此我必须将SVG内联。这是我降落的地方，虽然不太理想，但很有效

---

使用SVG名称的道具槽创建一个新组件。在该组件中添加所有svg作为代码。用一个v-if包住每一个

...
...
...
...
导出默认值{
道具：[“图标”]
}

然后通过在插槽中填充所需的名称来使用该组件

从“../path/to/iconComponent.vue”导入svgIcons
导出默认值{
组件：{svgIcons}，
...
}

它似乎会做你想做的事情。安装后，请尝试：

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

导出默认值{
名称：'图标'，
道具：{
姓名：{
类型：字符串，
必填项：true
}
},
计算：{
src（）{
const src=require（`assets/icons/${this.name}.svg？raw`）
返回src
}
}
}

不错。我试图在一个直接的Vue项目中完成它。该Nuxt插件是一个更好的解决方案。@laptou我现在有text/_Nuxt/5476b1293b10e0056bf8a8f9cf8c93c4.svg，而不是imageI，我有同样的问题，并用

替换了

。此外，src computed属性可以返回此

return require（`assets/icons/${this.name}.svg？inline`）。默认值
如果您的所有svg文件都在节点模块内，该怎么办folder@PirateApp为什么要将SVG文件放在
node\u modules
文件夹中？