How to include inline .svg in Nuxt application

Question

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

How to make it work?

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

Solution

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>