reactjs - چگونه یک فایل svg را در React وارد کنیم؟

من یک پروژهی سفارشی React + Typescript + Webpack دارم. من نیاز دارم یک فایل ساده .svg را وارد کنم و از آن در یک کامپوننت استفاده کنم. تایپاسکریپت ادعا میکند:

نمیتوان ماژول را پیدا کرد

من svgr را نصب کردهام، آن را به تنظیمات webpack خود اضافه کردهام، یک فایل custom.d.ts ایجاد کردهام که اجازه وارد کردن svg در تایپاسکریپت را میدهد و آن را در tsconfig.json مشخص کردهام. هیچ چیزی کار نمیکند (فعلاً کامپوننت را در Storybook اجرا میکنم).

این هم webpack من:

 module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /\.css$/, use: ["style-loader", "css-loader"] },
        { test: /\.svg$/, use: ["@svgr/webpack"] },
        { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
      ],
    },

کامپوننت من

import React, { useEffect } from "react";
import Account from "./account.svg";

export default function Icon({ icon }) {
  return (
    <div>
      <Account/>
    </div>
  );
}

فایل custom.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

// added to tsconfig.json
"include": ["./src/**/*", "./custom.d.ts"],

svg یک فایل ساده <svg><path blabla/></svg> است.

چطور این را درست کنم؟

پاسخ شماره ۱

من همان مشکل را داشتم و راه حل را اینجا پیدا کردم.

من شخصاً از این روش استفاده کردم:

1. من لوگوی خود را به عنوان یک ReactComponent وارد کردم.

2. سپس از آن در کدم استفاده کردم :)

import React from "react";
import { ReactComponent as MySvgFile } from "path/to/file.svg";

export default function MyComponent() {
  return (
    <div>
      <MySvgFile />
    </div>
  );
}