时间戳

首页 > 解决方案 > 如何在 React 中导入 svg 文件？

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

问题描述

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

找不到模块

我已经安装了 svgr，将其添加到我的 webpack 配置中，创建了一个 custom.d.ts 文件，允许在 typescript 中导入 svg 并在 tsconfig.json 中指定它。没有任何效果（我暂时在 Storybook 中运行该组件）。

这是我的网络包：

 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>文件。

如何解决这个问题？

标签： reactjstypescriptsvgwebpackimport

解决方案

我有同样的问题，我在这里找到了解决方案。

我个人使用了这种方法：

  1. 我将我的徽标导入为 ReactComponent。

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

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

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

推荐阅读