title: Use different loader in Webpack depending on from where I'm importing
body: <p>I'm using the <code>svg</code> loader to import SVG icons in my React file.</p>
  
  <p><code>webpack.config.js</code>:</p>
  
  <pre><code>{ test: /\.svg(\?.*)?$/, loader: 'svg' }
  </code></pre>
  
  <p><code>component.js</code>:</p>
  
  <pre><code>import Icon from './icon.svg'
  
  render () {
    return &lt;svg {...Icon.attributes} dangerouslySetInnerHTML={{ __html: Icon.content }} /&gt;
  }
  </code></pre>
  
  <p>So far I have no issues. I also want to use SVG images in my CSS. If I do this:</p>
  
  <pre><code>.class {
    background-image: url('./icon.svg');
  }
  </code></pre>
  
  <p>My final result looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/5Du8J.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/5Du8J.jpg" alt="background-image: url([object Object]);"></a></p>
  
  <p>I would like to use the <code>url</code> loader for my CSS file. I tried this:</p>
  
  <pre><code>.class {
      url('url!./icon.svg?name=[path][name].[ext]&amp;limit=1&amp;mimetype=image/svg+xml');
  }
  </code></pre>
  
  <p>In my CSS I get:</p>
  
  <p><a href="https://i.stack.imgur.com/v2TDw.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/v2TDw.jpg" alt="background-image: url(data:image/svg+xml;base64,bW9..."></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/mQOcn.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/mQOcn.jpg" alt="module.exports = {&quot;attributes&quot;:{&quot;xmlns&quot;:&quot;http://w..."></a></p>
  
  <p>Which leads me to think that the svg loader is still running.</p>
  
  <p>Is there a way to specify a different loader based on from which file I'm importing?</p>