Javascript 反应：将SVG内容作为变量返回？

我目前正在这样做：

class Checked extends React.Component {
    render() {
        return (
            <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
            </svg>
        );
    }
}

为什么这不起作用？我是否在这里返回变量而不是实际内容？我本以为这两者是等价的

---

PS:Webpack设置正确，我在该文件的其他地方使用导入，所以不是这样。（顺便说一下，我在这里使用的是GatsbyJS）

选项1：使用无状态组件包装：

const ImgTable = () => (
  <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
  </svg>
);

export default ImgTable;

import ImgTable from '../img/ImgTable'

class Checked extends React.Component {
  render() {
      return <ImgTable />;
  }
}

const ImgTable=（）=>(
);
导出默认ImgTable；

现在，您可以将其作为组件导入：

const ImgTable = () => (
  <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
  </svg>
);

export default ImgTable;

import ImgTable from '../img/ImgTable'

class Checked extends React.Component {
  render() {
      return <ImgTable />;
  }
}

从“../img/ImgTable”导入ImgTable
类检查扩展了React.Component{
render（）{
回来
}
}

选项2：使用（注意名称）。但是，您需要在导入时使用以下方法将SVG转换为字符串：

import imgTable from'../img/u table.svg'//这将返回一个字符串
类检查扩展了React.Component{
render（）{
回来
}
}

选项1：使用无状态组件包装：

const ImgTable = () => (
  <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
  </svg>
);

export default ImgTable;

import ImgTable from '../img/ImgTable'

class Checked extends React.Component {
  render() {
      return <ImgTable />;
  }
}

const ImgTable=（）=>(
);
导出默认ImgTable；

现在，您可以将其作为组件导入：

const ImgTable = () => (
  <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
  </svg>
);

export default ImgTable;

import ImgTable from '../img/ImgTable'

class Checked extends React.Component {
  render() {
      return <ImgTable />;
  }
}

从“../img/ImgTable”导入ImgTable
类检查扩展了React.Component{
render（）{
回来
}
}

选项2：使用（注意名称）。但是，您需要在导入时使用以下方法将SVG转换为字符串：

import imgTable from'../img/u table.svg'//这将返回一个字符串
类检查扩展了React.Component{
render（）{
回来
}
}

巴别塔插件内联反应svg

是一个插件，允许您完全按照问题中暗示的内容进行操作。它只是为svg文件中的每个节点创建一个react组件。然后，它用一个根元素包装整个组件树，您可以轻松命名根元素

---

像这样导入svg

Import SampleSVG from./sample.svg'。并在应用程序中按如下方式呈现它。它安全且简单。
巴别塔插件内联反应svg
是一个插件，允许您完全按照您在问题中暗示的方式操作。它只是为svg文件中的每个节点创建一个react组件。然后，它用一个根元素包装整个组件树，您可以轻松命名根元素

像这样导入svg
Import SampleSVG from./sample.svg'。并在应用程序中按如下方式呈现它。它安全且简单。
您可以将SVG传递给React中的变量，如下所示：

const checkIcon={
偶像：
};

并调用变量：

const Informations=（）=>{
返回(
{check.icon}这是带有React的SVG
)
}
您可以将SVG传递给React中的变量，如下所示：

const checkIcon={
偶像：
};

并调用变量：

const Informations=（）=>{
返回(
{check.icon}这是带有React的SVG
)
}
最后我意识到这对OP没有帮助。他想从.svg文件中插入他的svp。它可以用包装器和
危险的setinenerHTML={svg_content}
完成。最后我意识到这对OP没有帮助。他想从.svg文件插入他的svp。它可以通过一个包装器和
危险的setinenerHTML={svg_content}
来完成，变量用法不是
{checkIcon.icon}
吗？变量用法不是
{checkIcon.icon}
吗？