Webpack 5 use html-loader to load svgs

I recently upgraded to Webpack 5 and my html-loader no longer loads svg files and inlines them.

Here's my svg rule in webpack

{
  test: /\.svg$/,
  use: [
    {
       loader: 'html-loader',
       options: {
           minimize: true,
       },
    },
  ],
},

No matter how I try to import it, it seems to just create a file and not give me a string of HTML.

import mySvg from "../path/to/my.svg"

let mySvg = require("../path/to/my.svg").default;

// output = "/build/path/my.svg"
// output I want = "<svg>...."

It used to not give me several build files instead it inlined them in my JS.

Help would be appreciated.

svg-inline-loader can achieve the same (confirmed to work).

I have listed other options for loading SVGs at https://survivejs.com/webpack/loading/images/#loading-svgs.

Webpack 5 use html-loader to load svgs

Related

Recent Posts