Usage with url-loader breaks svg imports inside LESS files

[ppozniak]

Hello there.

Not quite sure if this is a problem with this library, or my setup, however I wanted to keep all the SVG imports as they are, in addition of using import {ReactComponent as Icon} from '...' in React Components.

Here's how my setup looked liked before adding svgr

  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  },

And after

{
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    use: ['babel-loader', 'svgr/webpack', 'url-loader?limit=10000&mimetype=image/svg+xml']
  }

Everything works fine except importing SVG's inside of LESS files (specifically speaking Iconmoon import):
url('@{icomoon-font-path}/myfontsvg?clelyn#myfont') format('svg');
There were no errors, but all icons were appearing as rectangles [].

Please let me know if this is an issue with svgr, or I'm doing something in a wrong way.
Best regards.

P.S I've found a workaround, just want to be sure this isn't my fault :)
The workaround

  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: {
      test: /\.jsx?$/
    },
    use: ['babel-loader', 'svgr/webpack', 'url-loader?limit=10000&mimetype=image/svg+xml']
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  },

[gregberge]

Actually it is an issue and your workaround is the good one. I think @gaearon had the same problem on react-create-app.

[gregberge]

I have to document it in Readme.