Reactjs 将SVG导入为组件时不进行渲染

我在React JS中导入SVG文件时遇到问题

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

我不知道为什么，但在某些组件中，

将正确渲染 而在其他组件中，它没有显示，当我使用inspect时，SVG就在那里，它确实占用了所需的空间，但SVG是空的

还有其他人遇到此问题吗？

请尝试：

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

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

<img src={logo} />

---

你可以这样做

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;

从“React”导入React；
从“./logo.png”导入徽标；//告诉webpack此JS文件使用此图像
console.log（徽标）；///logo.84287d09.png
函数头（）{
//导入结果是图像的URL
返回；
}
导出默认标题；

我遇到了同样的问题，将徽标组件包装在svg标记或div中，使其呈现在屏幕上。我还可以通过从徽标设置SVG颜色来更改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>

从“../Logo.svg”导入{ReactComponent as Logo}
//或者。。。

---

如果周围没有

或

标记，它将呈现一个空白图像，占用空间，几乎没有视觉效果。一旦我在它周围添加了包装标签，它就工作了。我喜欢这种方法，因为您可以根据用户输入动态更改SVG样式。

我也遇到了同样的问题，因为有些问题是我如何导入的，所以我使用以下方法解决了这个问题：

将{ReactComponent as Icon}从“pathtoyurfile.svg”导入
然后用作：

然而，其他时候，我也有过几次与此不符的地方，SVG的类和id名称通常相似，因此，如果您检查文件，您可能会看到clip0、image0、pattern0等。如果您有多个SVG，则id和类名很有可能冲突，并且相互覆盖。对我来说，最简单的解决方案是手动更改命名约定，不确定是否存在更自动化的解决方案？
@GalShtengel通常，导入静态资产会生成一个模块，而不是react组件。这个网页包可以将SVG作为react组件导入，但我不确定它的绑定器和正确的配置。你可以看看：救了我，谢谢！相同的ID使浏览器无法在多个SVG中渲染一个图像，其中ID相同。如果ID存在于单独的svg元素中，您知道为什么它们会相互覆盖吗？