typescript - 无法在 typescript 中导入svg文件

Question

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

import logo from './logo.svg';

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

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

能否请您分享一下如何在 ts 文件中完成这项工作？

Answer 1

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