How to import a local SVG file in React? - node.js

Question

I am trying to import a local SVG file in React but I keep coming across this error:
My code looks like this:
import React from "react";
import styled from "styled-components";
import { ReactComponent as Logo } from "./images/logo.svg";
const MainImage = styled.div`
height: 400px;
width: 100%;
background: #026857;
`;
const Home = () => {
return (
<div className="home">
<MainImage>
<Logo />
</MainImage>
</div>
);
};
export default Home;
I have tried many solutions offered by others such as importing default as Logo, creating an image prop to contain the local svg (<img src={'./images/logo.svg'}/> ) but none have given me any success so far. I believe I may have to add something to my Webpack config file but I'm not sure what it is and where I should put it, as the config file is nearly 800 lines of code.
Also, I am using SVG files from https://undraw.co/ if the information helps, it seems their illustrations have many tags in them which I have not seen in simple SVG icons.
<svg
id="f6dc6f51-58d1-4328-a543-5a2c5176acea"
dataName="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="922.18516"
height="747.35665"
viewBox="0 0 922.18516 747.35665"
>
<path
d="M420.91148,313.56734c-2.67984,100.75634,131.62869,203.61052,299.27661,203.61052S1154.817,318.5411,1028.01831,313.56734c-244.32514-9.5838-328.052-110.77046-303.55341-182.5C768.33985,2.60566,426.18809,115.17786,420.91148,313.56734Z"
transform="translate(-138.90742 -76.32167)"
fill="#3f3d56"
/>
<polygon
points="505.004 157.445 502.96 156.144 504.261 154.1 503.703 153.746 502.403 155.79 500.359 154.489 500.004 155.046 502.048 156.347 500.747 158.391 501.305 158.746 502.605 156.702 504.649 158.002 505.004 157.445"
fill="#fcce33"
/>
<polygon
points="657.004 305.445 654.96 304.144 656.261 302.1 655.703 301.746 654.403 303.79 652.359 302.489 652.004 303.046 654.048 304.347 652.747 306.391 653.305 306.746 654.605 304.702 656.649 306.002 657.004 305.445"
fill="#fcce33"
/>
...

Answer 1

assuming you are using Webpack 5, you need to configure your webpack loader to something like this using asset modules:
module: {
rules: [
{
test: /\.svg$/i,
type: 'asset/resource',
},
...
]
}
if you are using webpack 4, you can use file-loader instead of asset/resource:
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'file-loader',
},
],
},
...
]
}
then you can import your svg file like this:
import Logo from "./images/logo.svg";
//...
return <img src={Logo} />

Answer 2

I usually always convert each SVG into its own component like so
import * as React from "react";
const ArrowDownSVG = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
strokeWidth={2}
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
viewBox="0 0 24 24"
{...props}
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M6 9l6 6 6-6" />
</svg>
);
export default ArrowDownSVG;
Has worked for me in the past year or so
By leaving out the type for the props, you can use this in plain JS as well