The library is replacing more stuff than it should

[alexandernst]

Overall I like the library, but there is one big bug that makes it unusable. It is replacing stuff that it shouldn't. For example, I have a flags library that will display country flags when I add the proper CSS classes to an element. But svg-to-vue-component is, somehow, replacing the background-image of that other library, and the result is:

[egoist]

not sure how this happened, can you provide a complete example?

[alexandernst]

Sure! Here you go a completely new VUE project, with a simple Hello World component.

Just run npm install and npm run serve.

foobar.zip

The expected result is:

But instead, no flags are shown when your library is enabled in the vue.config.js.

[egoist]

// Use default rule for svg in css files
config.module.rule('svg')
  .issuer(file => file.endsWith('.css')

// Use our loader to handle svg imported by other files
config.module
  .rule('svg-component')
  .test(/\.svg$/)
  .issuer(file => !file.endsWith('.css'))
  .use('vue')
  .loader('vue-loader')
  .end()
  .use('svg-to-vue-component')
  .loader('svg-to-vue-component/loader')

This might work, can you give it a shot?

[alexandernst]

Yes, that seems to fix the issue! Thank you 👍

[egoist]

The doc has been updated: https://github.com/egoist/svg-to-vue-component#with-vue-cli

[mrleblanc101]

How would i do this with Nuxt ?

[shmarts]

Having the same issue, but instead of using the svgs in a .css file, I'm using them in the style tag of .vue files. Any work around that'll let me keep them in there?