Reactjs React-呈现导入的.svg文件

我需要渲染.svg文件。我不想使用危险的HTML。如果我直接复制svg内容并从组件渲染它，我就能够成功地渲染svg

但是，这不是非常可重用的。我不想复制每个.svg文件的内容。我希望能够导入一个svg文件并将其传递到我的组件中，然后该组件将呈现内容

以下是我到目前为止所做的工作，但它并没有呈现我的svg

我创建了一个接受导入的svg文件的组件，如下所示：

import React from "react";

class SvgComponent extends React.Component {
  constructor(props) {
     super(props);
   }
  render() {  
    return (
     props.svg // this works if I copy my .svg contents here (<svg>....</svg>)
  );
 }
};

SvgComponent.propTypes = {
  svg: React.PropTypes.string.isRequired,
};

export default SvgComponent;

从“React”导入React；
类SvgComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
props.svg//如果我将.svg内容复制到此处（..），则此操作有效
);
}
};
SvgComponent.propTypes={
svg:React.PropTypes.string.isRequired，
};
导出默认SVG组件；

下面是我如何使用该组件：

import mySvg from './images/mySvg.svg';
const Icon = (props) => { 
  return (
    <svgComponent svg={mySvg} />
  );
};

Icon.propTypes = {
  icon: React.PropTypes.string.isRequired,
};

export default Icon;

从“./images/mySvg.svg”导入mySvg；
常量图标=（道具）=>{
返回(
);
};
Icon.propTypes={
图标：React.PropTypes.string.isRequired，
};
导出默认图标；

这不起作用——它不会在网页上甚至在dom中显示我的svg。当我查看页面时，我看到的只是一个空的SVG组件：

<svgComponent />

---

任何关于在react中显示.svg文件的帮助都将非常有用

我创建了一个模块来解决这个问题。使用它，您可以加载svg并使用JSX操作其元素，而无需粘贴svg代码

Npm包：

检查有关故障的示例：

它使用起来很简单

可能的重复项不是重复项。我不想使用危险的HTML。很公平。我错过了问题的那一部分。谢谢。这将在DOM中加载以下内容，但不显示图像。以下是控制台中的错误：失败的子上下文类型：提供给

Samy

的类型为

string

的无效子上下文

svg

，应为

对象

。看起来该路径解析不正确。您可以检查devtools中的“网络”选项卡，查看请求是否成功，并调整路径。您是否正在使用create react应用程序？如果是这样，您可以导入svg：从“../images/myImage.svg”导入mySvg，然后使用path={mySvg}