无法导入打字稿中的svg文件

在typescript(*.tsx)文件中，我无法使用以下语句导入svg文件：

import logo from './logo.svg';

Transpiler说：[ts] cannot find module './logo.svg'. 我的svg文件仅为<svg>...</svg>。

但是在.js文件中，我可以完全相同的导入语句导入它而不会出现任何问题。我想这与svg文件的类型有关，必须为ts transpiler设置某种方式。

您能否在ts文件中分享如何进行这项工作？

如果使用webpack，则可以通过创建自定义类型文件来实现。

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

declare module "*.svg" {
  const content: any;
  export default content;
}

添加custom.d.ts到tsconfig.json如下

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

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

感谢smarx指出use require()。所以在我的情况下应该是：

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

在* .tsx文件中可以正常工作

添加一个custom.d.ts具有正确类型（感谢RedMatt）的文件（我在src目录的根路径上创建了它）：

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 />); 
}

我找到的解决方案：在ReactJS项目中，在文件react-app-env.d.ts中，您只需要删除注释中的空格，例如：

之前

// / <reference types="react-scripts" />

后

/// <reference types="react-scripts" />

希望对你有帮助

我在尝试REACT +打字稿教程时遇到了同样的问题。
对我有用的是以下导入声明。

import * as logo from 'logo.svg'

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

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

希望它可以帮助某人。

我们已经实现了另一种方法：制作SVG组件。我这样做是因为它使我感到困惑，因为我在require与imports 一起使用commonJS 语句。

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

如果您使用的是puglin slint，则可能是因为他已禁用，以为这是评论，但不阅读svg，则需要此类型脚本模块，只需禁用该行即可

要将n 个代码资源与TypeScript一起使用，我们需要推迟这些导入的类型。这需要一个custom.d.ts文件，该文件表示我们项目中TypeScript的自定义定义。

让我们为.svg文件设置一个声明：

定制文件

declare module "*.svg" {
  const content: any;
  export default content;
}

在这里，我们通过指定任何以.svg结尾的导入并将该模块的内容定义为SVG来声明一个新的SVG模块。