reactjs - 如何在 React 中导入 svg 文件？

Question

我有一个自定义的 React + Typescript + Webpack 项目。我需要导入一个简单的 .svg 文件并在组件中使用它。 typescript 声称它:

Cannot find module

我已经安装了 svgr，将它添加到我的 webpack 配置中，创建了一个 custom.d.ts 文件，允许在 typescript 中导入 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>文件。
如何解决这个问题？

Answer 1

我遇到了同样的问题，我找到了解决方案 here .
我个人使用这种方法:

我将我的徽标作为 ReactComponent 导入。

然后我在我的代码中使用了它:)

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

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