无法导入打字稿中的svg文件 [英] Unable to import svg files in typescript

问题描述

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

In typescript(*.tsx) files I cannot import svg file with this statement:

import logo from './logo.svg';

Transpiler说:[ts] cannot find module './logo.svg'. 我的svg文件只是<svg>...</svg>.

Transpiler says:[ts] cannot find module './logo.svg'. My svg file is just <svg>...</svg>.

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

But in .js file I'm able to import it without any issues with exact the same import statement. I suppose it has something to do with type of svg file which must be set somehow for ts transpiler.

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

Could you please share how to make this work in ts files?

推荐答案

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

If you use webpack, you can do this by creating a custom types file.

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

Create a file named custom.d.ts with the following content:

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

这篇关于无法导入打字稿中的svg文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！