对我来说，我必须包含react-app-env.d。tsconfig*.json:

  "include": [
    "src/Router.tsx",        // my main entry point
    "src/global.d.ts",       // global stuff
    "src/react-app-env.d.ts" // react global stuff
  ]

如果你使用的是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 />); 
}

对我来说，当我在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。

希望!这会帮助到别人。

实际上，我尝试了所有的步骤，但有一件事我们必须理解，您必须将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文件

我在网上寻找解决这个问题的办法。这个stackoverflow问题是最重要的，但没有一个答案对我有用。

最后，我通过尝试一些不同的技术找到了解决方案。

创建一个。/global .d。Ts文件在你的项目的根目录，在你的。/tsconfig文件的同一位置/级别。json。 在。/globals.d中。Ts文件，添加这个:

declare module '*.svg' {
  const content: string;
  export default content;
}

这正确地将.svg导入为字符串，这是我在排名最高的答案中注意到的一个问题。

更新您的tsconfig。Json格式:

{
  "files": ["globals.d.ts"]
}

就是这样，这对我来说很管用。这是一个VanillaJS应用。