search

nuxt-community / svg-module

Super simple svg loading module for Nuxt.js
MIT License
338 stars 35 forks source link

Dynamic file name in src attribute #55

Closed ryanw3b3r closed 4 years ago

ryanw3b3r commented 4 years ago

Hi,

Is there any way to make dynamic file names work with this module?

Example: <img :src="`~assets/svg/${icon}`" /> doesn't work inside Vue component.

I want to have a component to which I can pass a file name and it would properly fetch that svg file and display it. Ideally as inline svg, but this might be more complicated than img.

danielroe commented 4 years ago

Have you tried:

<img :src="require(`~/assets/svg/${icon}.svg`)" />
ryanw3b3r commented 4 years ago

Thanks @danielroe but it doesn't work. I'm getting an error: Cannot find module './.svg' Looks like svg-module is parsing file before icon variable is replaced by file name but I'm not sure.

ryanw3b3r commented 4 years ago

Sorry, actually your solution works fine and the error came up only because "icon" was blank further down the page! Thank you @danielroe ! Result!

sinisimattia commented 4 years ago

This works fine but you can also do this without the svg module. Isn't there a way to use this module with a dinamic filename?

MentalGear commented 3 years ago

Would this load the svg only on demand (true dynamic loading), or will it be bundled with the initial download?