SVG icon shows up as text in the loaded application index.html

[tusharosu]

• Operating System: Linux
• Node Version: 10.16.3
• NPM Version: 6.9.0
• webpack Version: 4
• file-loader Version: 4.2.0

Expected Behavior

The svg icon should show up as an image in the loaded application's html page

Actual Behavior

The svg icon shows up as the following text in the loaded application's html page module.exports = __webpack_public_path__ + "images/97f09d2d69ed0771769efa0d68f58476.svg";

Code

Here is the webpack.config.js loader configuration (followed the documentation for asset management): loader configuration for webpack.config.js

Here is the code that loads the svg image (The checkbox shows up fine when the applciation is loaded using the source code instead of from the minified bundle):

define([
 .....
  'tristate-checkbox/TristateCheckbox'
], (declare, TristateCheckbox, ...) => {
  ....
      let checkbox = TristateCheckbox({ id: 0, checked: true, name: 'test' });
      let tristateDiv = document.getElementById('tristate');
      tristateDiv.appendChild(checkbox);
    }
  });
});

The TristateCheckbox.js does the following to load the image:

define([..., 'dojo/text!./images/TristateCheckboxSVG.svg'], function (..., svgDoc) {
  'use strict';
  var div = document.createElement('div');
  div.innerHTML = svgDoc;
  var svg = div.firstChild.cloneNode(true);
...

How Do We Reproduce?

Using the configuration provided above.

[ipatch]

having the exact same behavior as well.

using

• npm@6.11.3
• webpack@4.40.2
• file-loader@4.2.0

also while skimming through the README i didn't see any examples that contained SVG as a filetype that file-loader can handle, so not exactly sure that this webpack loader can even handle SVG. 🤷‍♂️

Update

You might want to take a look at this

https://webpack.js.org/loaders/svg-inline-loader/

seems to get the job done for me, as I was able to add a SVG to the DOM.

cheers 🍩

[tusharosu]

Thanks for the advice Chris! Got it working with the svg-inline-loader!