如果你使用webpack，安装svg-inline-loader，在webpack.config.js中添加该模块:

{
    test: /\.svg$/,
    loader: 'svg-inline-loader',
}

它在建造后工作良好。

如果你的IDE报告一个交互错误，它可以通过添加//@ts-ignore来解决:

//@ts-ignore
import logo from './logo.svg';

Svg-inline-loader webpack文档

在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} />

希望!这会帮助到别人。

实际上，我尝试了所有的步骤，但有一件事我们必须理解，您必须将custom.d.ts文件创建到相应的SVG导入文件夹中。

Ts配置文件

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "Node",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"],
      "@static/*": ["src/static/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src/**/*", "src/static/optional.d.ts"],
  "exclude": ["node_modules", "build"]
}

optional.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;
}

最后是常用的导出文件:

import Logo from './images/logo.svg';
import BellDot from './images/bell-dot.svg';
import Logout from './images/logout.svg';
import pageNotFound from './images/page-not-found.png';

export {
    Logo,
    BellDot,
    pageNotFound,
    Logout
}

更好的主意是:

感谢smarx指出使用require()。所以在我的例子中，它应该是:

const logo = require("./logo.svg") as string;

在*中工作得很好。tsx文件

如果你使用webpack，你可以通过创建一个自定义类型文件来做到这一点。

创建一个名为custom.d.ts的文件，内容如下:

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

将custom.d.ts添加到tsconfig。Json格式如下

"include": ["src/components", "src/custom.d.ts"]

来源:https://webpack.js.org/guides/typescript/ importing-other-assets

我在尝试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"
  },

希望它能帮助到别人。