如何在 React 中导入本地 SVG 文件？

我正在尝试在 React 中导入本地 SVG 文件，但我不断遇到此错误：

我的代码如下所示：

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;

我尝试了其他人提供的许多解决方案，例如将默认值导入为 Logo，创建一个包含本地 svg ( <img src={'./images/logo.svg'}/> )的图像道具，但到目前为止都没有给我任何成功。我相信我可能需要在我的 Webpack 配置文件中添加一些东西，但我不确定它是什么以及我应该把它放在哪里，因为配置文件有将近 800 行代码。

另外，我正在使用来自https://undraw.co/ 的SVG 文件，如果这些信息有帮助，他们的插图中似乎有很多标签，我在简单的 SVG 图标中没有看到这些标签。

<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"
      />
...