Unable to Import svg as React Component

[FoonkG]

• electron-builder Version: 22.9.1
• electron-webpack Version: 2.8.2

• Target: Windows, Mac

I'm trying to import a SVG as a React Component.

import { ReactComponent as Icon} from "../assets/icon.svg";

When i try to do this, i get errors like this.

I've tried using svgr without any luck.

webpack.main.additions.js

module.exports = (config) => {
	return {
		...config,
		devtool: false,
		module: {
			rules: [
				{
					test: /\.ts$/,
					loader: "ts-loader",
				},
				{
					test: /\.html$/,
					use: "html-loader",
				},
				{
					test: /\.svg$/,
					use: ["@svgr/webpack"],
				},
			],
		},
	};
};

[veighthedev]

Facing the same issue

[loopmode]

import { ReactComponent is a preconfigured feature of create-react-app, more specifically of the react-scripts package used by CRA.
electron-webpack has no knowledge of that.

There are many different ways of using svg in react with webpack, you should investigate some more.

[FoonkG]

import { ReactComponent is a preconfigured feature of create-react-app, more specifically of the react-scripts package used by CRA.
electron-webpack has no knowledge of that.

There are many different ways of using svg in react with webpack, you should investigate some more.

I did, most ways are importing SVG then making an <img> and setting that svg as its source but i want it to be an actual svg so i can style it with css etc..

[loopmode]

Ah. I see. Apologies for being all brainy-smurfy.

[veighthedev]

Fix: #422

[marwan-9]

@FoonkG
make this edit in webpack.config and it will work
use: ["@svgr/webpack", "url-loader'],

[FoonkG]

@FoonkG
make this edit in webpack.config and it will work
use: ["@svgr/webpack", "url-loader'],

Just in time!