Loading an svg in webpack with svg-url-loader

Question

I'm having a lot of trouble working with SVG in my webpack workflow. I'm trying to get it to display with the background: url(sample.svg) property in CSS. Using this alone did not work, so I figured I had use a loader. Here are the steps I used.

I used svg-url-loader to load the SVG.

1. I installed svg-url-loader via npm and added this to my module.exports:

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

2. I added this to the top of my index.js file:

require('svg-url-loader!./images/topography.svg');

3. I added background-image with the SVG path to my CSS:

body {
  background-image: url("../images/topography.svg");
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  background-attachment: fixed;
  letter-spacing: -1px;
}

4. The SVG is not being rendered to the page. When I inspect the body in browser, I find this:

background: url(data:image/svg+xml,module.exports = __webpack_public_path__ + '8dccca4….svg';);

I don't know too much about data-uri, so maybe I am running into the issue there.

Also, I've tried this using different SVG files, and none of them worked.

Answer 1

I met the same exact error. After some investigation I found I added another svg loader which caused this problem, so I fixed it by deleting the other svg loader:

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

      {
        test: /\.svg$/,
        use: [
          "babel-loader",
          {
            loader: "react-svg-loader",
            options: {
              svgo: {
                plugins: [{ removeTitle: false }],
                floatPrecision: 2
              },
              jsx: true
            }
          }
        ]
      }

So you maybe also added some extra loaders to handle the svg files at the same time, please check.

Answer 2

You can:

a) set up loaders in webpack.config.js:

example.js:

import ExampleIcon from 'assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />

webpack.config.js:

{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: 'react-svg-loader',
      options: {
        svgo: {
          plugins: [{ removeTitle: false }],
          floatPrecision: 2
        },
        jsx: true
      }
    }
  ]
},

b) or set up loaders in the import string:

import ExampleIcon from '!babel-loader!react-svg-loader!assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />