尝试：

import { default as logo } from '../logo.svg';

并在 img 类型的节点中用作源，如下所示：

<img src={logo} />

我遇到了完全相同的问题，将徽标组件包装在 svg 标签或 div 中使其呈现在我的屏幕上。我还可以通过从徽标设置它来更改 SVG 颜色。

import { ReactComponent as Logo} from '../logo.svg'

<svg><Logo fill="blue" width="100%" height="100%" /></svg>

// or...

<div><Logo fill="blue" width="100%" height="100%" /></div>

如果没有<svg>或<div>标签包裹它，它会渲染一个空白图像，占用空间并且几乎没有视觉效果。一旦我在它周围添加了包装标签，它就起作用了。我喜欢这种方法，因为您可以根据用户输入动态更改 SVG 样式。

我遇到了同样的问题，对于某些人来说，这是我导入它们的方式，所以我使用以下方法解决了这个问题：

import {ReactComponent as Icon} from 'pathtoyourfile.svg 然后用作： <Icon />

然而其他时候，我也犯过几次这样的问题，SVG 通常有相似的类和 id 名称，所以如果你检查文件你可能会看到 clip0、image0、pattern0 等。如果你有多个 svg 的好机会 ID 和类名相互冲突并且相互覆盖。对我来说，最简单的解决方案是手动更改命名约定，不确定是否存在更自动化的解决方案？

你可以这样做

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}
export default Header;