{
  test: /\.svg/,
  use: [
    {
      loader: 'url-loader'
    },
    {
      loader: 'svg-react-loader'
    }
  ]
}

This is module: { rules: [ section regarding SVG loaders in my webpack.config.js

Anyone used similar setup and had issues with importing svg files in React?

I need both to load svg in CSS and to import them in React. If I use

• url-loader alone CSS works.
• If I use svg-react-loader alone imports in React works.

But together imports in React fails with the following error:

Module build failed: Error: Non-whitespace before first tag.

Here is how I import the SVG in React cmp:

import StarIcon from 'svg-react-loader!mdi-svg/svg/star.svg';

{
  test: /\.svg/,
  use: [
    {
      loader: 'url-loader'
    },
    {
      loader: 'svg-react-loader'
    }
  ]
}

This is module: { rules: [ section regarding SVG loaders in my webpack.config.js

Anyone used similar setup and had issues with importing svg files in React?

I need both to load svg in CSS and to import them in React. If I use

• url-loader alone CSS works.
• If I use svg-react-loader alone imports in React works.

But together imports in React fails with the following error:

Module build failed: Error: Non-whitespace before first tag.

Here is how I import the SVG in React cmp:

import StarIcon from 'svg-react-loader!mdi-svg/svg/star.svg';

• javascript
• reactjs
• webpack

Share Improve this question Follow asked Jan 4, 2018 at 21:28 DevelogerDeveloger 3,99822 gold badges2525 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Apparently the cleanest way to handle loaders without a need to reference the loader in the actual JS / CSS code during the imports is to use oneOf with exclude property:

    {
      test: /\.svg$/,
      oneOf: [
        {
          exclude: path.resolve(__dirname, '../src/'),
          use: 'svg-react-loader'
        },
        {
          exclude: path.resolve(__dirname, '../node_modules/'),
          use: 'url-loader'
        },
      ],
    }

A better way is to use oneOf, but with include option, which is logically more correct, than exclude option:

{
  test: /\.svg$/,
  oneOf: [
    {
      include: path.resolve(__dirname, '../node_modules/'),
      use: 'svg-react-loader'
    },
    {
      include: path.resolve(__dirname, '../src/'),
      use: 'url-loader'
    },
  ],
}