如何在 Nuxt 应用程序中包含内联 .svg [英] How to include inline .svg in Nuxt application

问题描述

我想做一件常见的事情 - 在 Vue Nuxt 应用程序中动态包含一个 svg HTML，我将能够对其进行样式设置.为此，我创建了一个组件，但不是图像，而是一个文本 data:image/svg+xhtml....

I want to do a common thing - include dynamically an svg HTML in Vue Nuxt application which I will able to style. To do this, I created a component but instead of image, I get a text 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>

推荐答案

好像@nuxtjs/svg 会做你想做的事.安装后，尝试:

It seems like @nuxtjs/svg will do what you're trying to do. After installing it, try:

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

这篇关于如何在 Nuxt 应用程序中包含内联 .svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！