Using svg as background-image does not work

[studnitz]

When you use the default options and rules given here, svg paths cannot be used in CSS background-image: url() anymore.

Example:

background-image: url('~/assets/some-icon.svg')

Output

background-image: url('[Object object]')

Expected

background-image: url("data:image/svg+xml;utf8,<svg> optimized svg </svg>");

This would require https://github.com/bhovhannes/svg-url-loader to work

The webpack config could then look like that, I tried to make it work locally, but somehow the resulting SVG data gets escaped (guess this is some kind of nuxt XSS protection).

config.module.rules.push({
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /css/,
      use: {
        loader: 'svg-url-loader',
        options: { noquotes: false }
      }
    },
    {
      use: [
        'vue-loader',
        {
          loader: 'svg-to-vue-component/loader',
          options
        }
      ]
    }
  ]
})

You could use it then like this:

background-image: url('~/assets/some-icon.svg?css')

[studnitz]

A workaround for this is putting the icons in /static instead of /assets, or maybe using file-loader instead of svg-url-loader in the webpack config mentioned above.

[manniL]

@studnitz I'll look into this soon ☺️ By default (w/o the module) you can use them as BG images. A custom config could be better for that one though 🤔

[hmaesta]

This is a great request – I am facing the same problem right now.

A nice approach used by vue-svg-loader is allowing the use of ?internal when you want the SVG to be inline. ⟶ See here: How to use both inline and external SVGs?

I think that would be better if we could use ?external instead – and leave the default behavior as today. That way we could use something like:

<template>
  <div>
    <InlineSVG />
    <div class="external-svg" />
  </div>
</template>

<script>
import InlineSVG from './public/inline.svg';

export {
  components: {
    InlineSVG,
  },
};
</script>

<style>
.external-svg {
  background-image: url("./public/external.svg?external"); // Note the `?external` query string
}
</style>

[studnitz]

Here is another workaround from the used library:
egoist/svg-to-vue-component#18 (comment)

[priyeshvadhiya]

Here it is way to resolve them.

:style="{ backgroundImage: 'url(' + require(@/assets/img/${page.image}) + ')' }"

[manniL]

The workaround from egoist/svg-to-vue-component#18 (comment) could be "translated" from webpack-chain syntax to normal webpack config syntax. If I have some spare time, I'll give it a shot.

However, I'm accepting a PR (feature + one test) that fixes the issue.

[3b3ziz]

@manniL But the approach mentioned in egoist/svg-to-vue-component#18 (comment) would solve only styling imported from .css files. What about <img src="test.svg"> or inline styling <div :style="{ backgroundImage: url('test.svg'} />"?

[manniL]

@3b3ziz True, ideally an ?inline query (described as ?internal above) would be better 👍

[lucien144]

My approach to this is (tested on Nuxt v2.3 & v2.8) is:

// nuxt.config.js
extend(config) {
	const svgRule = config.module.rules.find(rule =>
		rule.test.test('.svg')
	);

	svgRule.test = /\.(png|jpe?g|gif|webp)$/;

	config.module.rules.push({
		test: /\.svg$/,
		oneOf: [
			{
				resourceQuery: /inline/,
				loader: 'file-loader',
				query: {
					name: 'assets/[name].[hash:8].[ext]'
				}
			},
			{
				loader: 'vue-svg-loader',
				options: {
					// Optional svgo options
					svgo: {
						plugins: [{ removeViewBox: false }]
					}
				}
			}
		]
	});
}

Solves SVG in <img/> as well as in CSS. Usage is <img src="~assets/images/ico-close.svg?inline"/>

[stouch]

just for the record, since @3b3ziz has modified it himself 👍 , the good way is now :

background-image: url('~/assets/some-icon.svg?inline')