如果你使用的是create-react-app 2+: docs

添加一个custom.d.ts文件(我在src目录的根路径上创建的)，使用正确的类型(感谢RedMatt):

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

安装svg-react-loader或其他，然后:

使用它作为主要的svg加载器 或者如果你正在迁移一个代码库，并且不想接触工作部分(JS)，请在导入时指定加载器:

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

然后将其用作JSX标记:

function f() { 
  return (<MySVG />); 
}

我们已经实现了另一种方法:制作svg组件。我这样做是因为它困扰我，我使用commonJS的要求语句与我的导入。

对我来说，当我在src/types/images.d.ts中放入以下一行时，它就工作了

声明模块'*.svg';

我用下面的方法导入图像

import {ReactComponent as WifiIcon} from '../../ assets/images/Wifi.svg';

在tsconfig.json

我有以下complierOptions

"compilerOptions": {
    "typeRoots": ["node_modules/@types", "src/types"]
}

希望它能帮助到别人。我使用的是最新版本的CRA。

你可以像create-react-app一样为svgs声明module:

react-app.d.ts

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

看到源

在CRA应用程序中导入SVG文件

如果你想在CRA应用(create-react-app)中导入SVG文件，而不做任何配置，你可以使用以下方法之一:

方法1

import { ReactComponent as MyIcon } from "./assets/images/my-icon.svg";
...
<MyIcon />

方法2

import myIconFileName from './assets/images/my-icon.svg';
...    
<img src={myIconFileName} />

我在尝试REACT + typescript教程时也遇到了同样的问题。 对我有用的是下面的重要陈述。

import * as logo from 'logo.svg'

下面是我在package.json中的依赖项。

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

希望它能帮助到别人。