2

Final Goal : Include SVG icons from files with the possibility to use CSS on it (mainly on the fill parameter). This seems to mean having a way to inline the SVG file in the Vue template.

I have found plenty of solutions involving webpack loaders (vue-svg-inline-loader, vue-svg-loader, and 2 or 3 others), but I also want to be able to choose dynamically which file I load by using a v-bind directive on the source parameter. Something like :

<img :src="`path/to/${file}.svg`" />

or

<custom-component :src="`path/to/${file}.svg`" />

And none of the webpack loaders seems to allow that. I found no vue plug-in with this feature.

My porject is a quasar-framework project, if this can help.

Tom
  • 1,357
  • 2
  • 13
  • 32

1 Answers1

1

You can do like that: 

<template v-html="svgFile"></template>
...
computed:{
  svgFile(){
    require(`path/to/${this.file}.svg`)
  }
}

But you also need config your webpack to out put your svg as raw html. Using some plugin like svg-inline-loader or whatever you want. See more

{ test: /\.svg$/, loader: 'svg-inline-loader' }
Duannx
  • 7,501
  • 1
  • 26
  • 59
  • This does not work, first, the `file` parameter cannot be used here since computed properties do not accept parameters, but even when trying with a static (valid) path for now, nothing is displayed (and no error thrown, sadly). – Tom Mar 19 '19 at 12:27
  • 1
    @Tom Try inspecting to your template and see if the inline svg exists but you can not see it? – Duannx Mar 19 '19 at 12:36
  • I used another (similar) workaround: `
    ` with a `v-for` loop on `item` in `items`. It's half satisfying since I still have to declare each icon path in my `items` but I already spent too many hours on this, and I don't think I can get any closer, see https://github.com/oliverfindl/vue-svg-inline-loader/issues/2     – Tom Mar 19 '19 at 14:31