SVG icons getting corrupted while using file-loader along with svg-sprite-loader

[msinghal56]

The following Webpack loaders/pluging are used in our project –

• CopyPlugin – To copy all the assets to the build folder
• File Loader – To Resolve import/require() on a file into a url and emits the file into the output directory
• Svg Sprite Loader – To generate sprite from the svg’s to be used for icons

Issue –

The copy plugin is copying all the assets inside the build/images correctly. The file loader tries to resolve this piece of code written in one of the less file –

.slider-minus {
  background: url(./images/svg/slider-minus.svg) no-repeat;
  width: 17px;
  height: 17px;
  object-fit: contain;
  border: 2px solid red;
}

While doing so, it emits the slider-minus.svg file into the build directory.

This slider-minus.svg is then used by the svg-sprite-loader and it adds some unwanted code in the svg file as shown below –

export default {
  id: "slider-minus-usage",
  viewBox: "0 0 17 17",
  url: __webpack_public_path__ + "/Users/maysingh2/POC/src/images/svg/slider-minus.svg",
  toString: function () {
    return this.url;
  }
}

Due to this unwanted code, the icon is not rendered properly from the generated css file .

.slider-minus {
  background: url(images/slider-minus.svg) no-repeat;
  width: 17px;
  height: 17px;
  object-fit: contain;
  border: 2px solid red;
}

Does anyone has any idea how to correct the icon rendering. This is happening with lots of other icons in the project. Here is the github url for this problem POC - https://github.com/msinghal56/svg-poc

Commands to run -

npm install
npm run dev/npm start

Please let me know if you have a solution for this.