CODEWITHSUNDEEP
svgnuxt.js
drake035
drake035

Reputation: 2877

SVG doesn't render using @nuxtjs/svg

Using "vue-svg-loader" method to the letter in the module's docs, I get this error:

[Vue warn]: Invalid Component definition: data:image/svg+xml;base64,PHN2ZyB3aWR0...

My code is identical to the example.

Any idea why I'm getting such error?

(note that previously I tried to use the code from this answer and didn't get error, however a string "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhl..." was rendered on the page instead of the actual SVG image)

EDIT: below is my template's code, in /components/global/SvgIcon.vue.

<template>
  <ArrowRight />
</template>

<script>
import ArrowRight from '~/assets/img/arrow-right.svg?inline'

export default {
  components: {
    ArrowRight
  }
}
</script>

And my SVG icon is in /assets/img/.

SVG file content:

<svg width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3604 9.93625C12.3604 10.2924 12.2231 10.6485 11.9492 10.9201L3.32384 19.4648C2.77517 20.0083 1.88558 20.0083 1.33712 19.4648C0.788667 18.9214 0.788667 18.0403 1.33712 17.4967L8.96929 9.93625L1.33739 2.37573C0.788933 1.83218 0.788933 0.951159 1.33739 0.407866C1.88585 -0.135954 2.77543 -0.135954 3.32411 0.407865L11.9494 8.95245C12.2234 9.22412 12.3604 9.58023 12.3604 9.93625Z" fill="white"/>
</svg>

Upvotes: 5

Views: 5641

Answers (1)

mcernak
mcernak

Reputation: 9130

Have a look at your nuxt.config.js config file and add a reference to module @nuxtjs/svg (as described in the Installation section in the module's doc)

I've tested it by on a minimal project (nuxt hello world example + @nuxtjs/svg). Initially it worked ok and rendered the image correctly. After removing the module reference, I got the same error message as you've described.

Upvotes: 4

Related Questions