无法在typescript中导入svg文件

在typescript(*.tsx)文件中，我不能用下面的语句导入svg文件:

import logo from './logo.svg';

Transpiler说:[ts]找不到模块'./logo.svg'。我的svg文件就是<svg>…</svg>。

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

你能在ts文件中分享一下如何做到这一点吗?

当前回答

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

其他回答

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

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

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

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

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

希望它能帮助到别人。

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

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

如果你正在使用puglin slint，可能是他已经禁用了，认为这是一个评论，但不是为了阅读SVG，你需要这个类型脚本模块，只是禁用行和高兴

推荐文章