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.

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.

• javascript
• svg
• webpack
• webpack-5
• webpack-html-loader

• 1 I have listed some options at survivejs./webpack/loading/images/#loading-svgs . I wonder if one of those would fit your use case. – Juho Vepsäläinen Commented Jan 19, 2022 at 17:49
• @JuhoVepsäläinen Thank you, the svg-inline loader worked! – Christian Pavilonis Commented Jan 19, 2022 at 18:54
• Thanks, I moved that as an answer so you can mark the issue as resolved. Thanks. :) – Juho Vepsäläinen Commented Jan 20, 2022 at 8:12

3 Answers 3

webpack 5 and above

Use raw-loader, asset/source (inlines as svg), or asset/inline (inlines as base64) loader.

webpack 4 and earlier

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

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

I use posthtml and posthtml-inline-svg plugin.

const postHtml = require('posthtml');
const postHtmlInlineSvg = require('posthtml-inline-svg');

{
  test: /\.html$/,
  use: {
    loader: 'html-loader',
    options: {
      esModule: false,
      preprocessor: async (content, loaderContext) => {
        try {
          return await postHtml(postHtmlInlineSvg({ cwd: loaderContext.context, tag: 'icon', attr: 'src' }),).process(content)).html;
        } catch (error) {
          loaderContext.emitError(error);
          return content;
        }
      },
    },
  },
},

If you're using HtmlWebpackPlugin, the HtmlWebpackInlineSVGPlugin can be used to inline svgs.

Here are the relevant parts of the webpack config to achieve the same:

{
  // ...
  module: {
    rules: [
      {
        test: /\.html/,
        loader: "html-loader",
      },
      // ...
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackInlineSVGPlugin({
      inlineAll: true,
    }),
    // ...
  ]
}