#How to use SVG files with Nuxt.JS?

38 messages · Page 1 of 1 (latest)

cunning estuary
#

How to use SVG files with Nuxt.JS? You can't require() svg files IIRC.

tender lotus
#

you may be able to straight import them

#

i cant remember if vite handles SVGS like that or you need a plugin

cunning estuary
#

Thanks again!

cunning estuary
tender lotus
#

i meant like a vanilla import statement where there would be some behind the scenes magic to handle things for you

cunning estuary
#

Oh lol

#

Yeah, I can't do that in this case

tender lotus
#

i;ve had projects where i can do import mysvg from '@/assets/this.svg' and it worked i just couldnt remember how

cunning estuary
# 
<img v-for="badge in badges" :src="require(`~/assets/svg/badges/${badge}.svg`)" :key="badge"/>

This is what I'm trying to do.

#

I've installed nuxt-svgo and everything but I still can't get it to work :/

#

Any help?

tender lotus
#

ah ok

#

this context makes more sense

cunning estuary
#

Hm

tender lotus
#

i havent done something like this before but i can give it a whirl

if your project is public maybe i can give it a run and try and figure that out for you

#

but i cant imagine require is going to be used

# 
<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
#

thats the base example from the docs so we would probably change that to be

# 
<img :src="`~/assets/svg/badges/${badge}.svg`">
#

they specifically show that this works with SVGs

cunning estuary
#

It just evaluates into ~/assets/svg/badges/nitro.svg in devtools

tender lotus
#

ok im trying to recreate a minimal example just give me a sec

#

looks like you found a bug potentially

cunning estuary
#

lmao

#

I really need to do this though

tender lotus
#

i have a solution but its unfortunate

cunning estuary
#

Absolute paths?

tender lotus
#

create vue components with just svgs in them in the template

#

no script needed

#

then use <component :is=""/> and inside the is you put the name of the component you created

cunning estuary
#

Alright. That works.

tender lotus
#

just a minimal show of svg working as a vue component

cunning estuary
#

Thanks!