SVG as background-url in SFC <style> tag

Context

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?

_Originally posted by @shmarts in https://github.com/egoist/svg-to-vue-component/issues/18#issuecomment-503520585_

Explanation

This issue was closed due to hotfix pr (#50), however this specific case is still a problem.

If you have svg-to-vue-component installed then you are unable to use svgs within the <style> section of a Vue single file component.

I guess a workaround in the meantime is to just import a css/sass file with the background-image.

[franciscolourenco]

@Raigasm you could also do it this way: https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs

[m8schmit]

Like @franciscolourenco said you juste have to put

  chainWebpack(config) {
    const FILE_RE = /\.(vue|js|ts|svg)$/

    config.module.rule('svg').issuer(file => !FILE_RE.test(file)).oneOf('svg')

    config.module
      .rule('svg-component')
      .test(/\.svg$/)
      .issuer(file => FILE_RE.test(file))
      .oneOf('ignore')
      .resourceQuery(/\?ignore/)
      .use('file-loader')
      .loader('file-loader')
      .end()
      .end()
      .oneOf('normal')
      .use('vue')
      .loader('vue-loader')
      .end()
      .use('svg-to-vue-component')
      .loader('svg-to-vue-component/loader')

  }

And your css gonna look like

background-image: url("~@/assets/my-svg.svg?ignore");