Usage with Webpack 5 Asset Modules

[Scrumplex]

I can't get this working with Webpack 5's asset modules.

If I set /\.svg$/ type to asset/resource it generates the font with a module.exports=. If i set it to asset/inline it set's the type SVG instead of WOFF.

This is my rule for my CSS

        {
            test: /\.scss$/,
            use: [
                {loader: MiniCssExtractPlugin.loader},
                {loader: "css-loader", options: {sourceMap: mode !== "production"}},
                {
                    loader: "postcss-loader",
                    options: {
                        sourceMap: mode !== "production",
                        postcssOptions: (loader) => {
                            return {
                                plugins: [
                                    new IconfontWebpackPlugin({
                                        resolve: loader.resolve,
                                    })
                                ]
                            };
                        }
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: mode !== "production"
                    }
                }
            ]
        }

This is my rule for SVG

        {
            test: /\.svg$/,
            use: [
                {
                    loader: "svgo-loader"
                }
            ],
            type: "asset/resource"
        }

This is my rule for all other assets (incl. WOFF)

{
            test: /\.(woff(2)?|ttf|eot|jpg|png)(\?v=\d+\.\d+\.\d+)?$/,
            type: "asset/resource"
},

[Scrumplex]

A link to the changes I made replacing file-loader with asset modules: https://gitlab.com/Scrumplex/website/-/commit/a36b23791798dec633259059602975b876f3d595

[cojaco]

I'am having the same Problems, I replaced file-loader with type: "asset/inline" or type: "asset/resource" both won't work.

The problem seems to be that the base64 format is wrong:

I get this font-family:custom-x65396; src:url(data:image/svg+xml;base64,bW9...

But it should look like this:

font-family: custom-x65396; src:url(data:application/x-font-woff;charset=utf-8;base64,bW9...

Does anyone have an idea how to use iconfont-webpack-plugin in conjunction with webpack5?

[Scrumplex]

As I couldn't find a way to fix this issue I looked for alternatives. There is webfonts-loader which works very similarly.

It's pretty straightforward to migrate.

This is how I did it: https://gitlab.com/Scrumplex/website/-/commit/1c1db598da2a02f5736df26a016833959f98416e

[cojaco]

Thank you Scrumplex I will definitely have a look!

Another alternative might be: https://github.com/daipeng7/iconfont-webpack-plugin#readme

[iiLsss]

You can try using the iconfont-webpack5-plugin available at https://www.npmjs.com/package/iconfont-webpack5-plugin.