Webpack 5 use html-loader to load svgs

Question

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 have listed some options at https://survivejs.com/webpack/loading/images/#loading-svgs . I wonder if one of those would fit your use case. — Juho Vepsäläinen, Jan 19 '22 at 17:49
Thanks, I moved that as an answer so you can mark the issue as resolved. Thanks. :) — Juho Vepsäläinen, Jan 20 '22 at 08:12

Juho Vepsäläinen · Accepted Answer · 2023-08-28T06:25:06.877

1

webpack 5 and above

Use raw-loader or asset/inline 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.com/webpack/loading/images/#loading-svgs.

edited Aug 28 '23 at 06:25

answered Jan 20 '22 at 08:11

Juho Vepsäläinen

26,573
12
79
105

it is no longer maintained. use `raw-loader` or `asset/inline` loader in webpack 5. – Oleg Abrazhaev Aug 27 '23 at 12:04

score 1 · Answer 2 · answered Jul 02 '22 at 15:38

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;
        }
      },
    },
  },
},

score 0 · Answer 3 · answered Jul 09 '22 at 13:10

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,
    }),
    // ...
  ]
}

Webpack 5 use html-loader to load svgs

3 Answers3

webpack 5 and above

webpack 4 and earlier