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

如果你想在CRA应用(create-react-app)中导入SVG文件，而不做任何配置，你可以使用以下方法之一:

方法1

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

方法2

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

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

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

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

你可以像create-react-app一样为svgs声明module:

react-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;
}

看到源

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

希望它能帮助到别人。

我找到的解决方案:在ReactJS项目中，在文件react-app-env.d中。你可以删除评论中的空格，比如:

之前

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

后

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

我希望能帮到你

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