Use different loader in Webpack depending on from where I'm importing

Question

I'm using the svg loader to import SVG icons in my React file.

webpack.config.js:

{ test: /\.svg(\?.*)?$/, loader: 'svg' }

component.js:

import Icon from './icon.svg'

render () {
  return <svg {...Icon.attributes} dangerouslySetInnerHTML={{ __html: Icon.content }} />
}

So far I have no issues. I also want to use SVG images in my CSS. If I do this:

.class {
  background-image: url('./icon.svg');
}

My final result looks like this:

I would like to use the url loader for my CSS file. I tried this:

.class {
    url('url!./icon.svg?name=[path][name].[ext]&limit=1&mimetype=image/svg+xml');
}

In my CSS I get:

This looks like what I want but the image is not displayed and if I open the url in a separate tab I get this:

Which leads me to think that the svg loader is still running.

Is there a way to specify a different loader based on from which file I'm importing?

Answer 1

Add issuer see: webpack.js.org/configuration/module/#rule-issuer

An example:

{
  test: /\.svg(\?.*)?$/,
  issuer: /\.js$/,
  loader: 'svg-inline-loader',
},

{
  test: /\.svg/,
  issuer: /\.scss$/,
  use: {
    loader: 'svg-url-loader',
    options: {},
  },
},