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

如果你使用 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 指出使用 require()。所以在我的情况下应该是：

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

在 *.tsx 文件中工作正常

---

如果您使用的是 create-react-app 2+：文档

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

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

安装 svg-react-loader 或一些 other，然后：

将其用作主要的 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" />

我希望能帮助你

---

您可以像 create-react-app 一样为 svgs 声明模块：

反应-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;
}

见source

---

我搜索了互联网寻找解决此问题的方法。这个 stackoverflow 问题排在首位，但没有一个答案对我有用。

最后，我能够通过尝试几种不同的技术来找到解决方案。

在项目的根目录中创建一个 ./globals.d.ts 文件，位于 ./tsconfig.json 所在的相同位置/级别。在该 ./globals.d.ts 文件中，添加以下内容：

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

这会正确地将 .svg 作为字符串导入，这是我在评分最高的 answer 中注意到的一个问题。

使用以下内容更新您的 tsconfig.json：

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

就是这样 - 这让它在我的情况下工作。我会注意 - 这是在 VanillaJS 应用程序中。

---

如果您使用 Create-React-App 启动器，请确保 react-app-env.d.ts 包含以下行：

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

---

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

希望它可以帮助某人。

---

我们已经实现了另一种方法：制作您的 SVG 组件。我这样做是因为它让我觉得我在 import 旁边使用了 commonJS require 语句。

---

没有 webpack 和 custom.d.ts 的解决方案

对我来说，上述解决方案都不是单独工作的。因为我在当前项目中没有使用 Webpack。

我调查了日志中的输出，然后以下方式对我有用，无需创建文件（custom.d.ts）、更改配置或安装新的依赖项：

const logo: string = require("../assets/images/logo.svg").default;

<img src={logo} alt="logo" />

对于 svg 格式，您需要添加 .default，但对于 png 格式则不需要。

---

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

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

---

希望！这将帮助某人。

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

可选的.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
}

为了更好的主意：

https://i.stack.imgur.com/6vhvm.png

---

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

如果您想在 CRA 应用程序 (create-react-app) 中导入 SVG 文件，而不进行任何配置，您可以使用以下方法之一：

方法一

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

方法二

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

---

如果您使用 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 docs

---

对我来说，我必须在我的 tsconfig*.json 中包含 react-app-env.d.ts：

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

---

对我来说，当我将以下行放入 src/types/images.d.ts 时它起作用了

declare module '*.svg';

我正在通过以下方式导入图像

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

在 tsconfig.json

我有以下编译器选项

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

希望它可以帮助某人。我使用最新版本的 CRA。

---