Javascript 在React 17.0.1中使用SVG

我正在尝试导入svg，但它显示错误：

这是我的意思：

import { InfoIcon } from '../../assets/img/info_icon.svg';

之后，使用“渲染中的组件”功能会显示以下错误：

react\u devtools\u backend.js:2430警告：react.createElement:类型为 无效--应为字符串（用于内置组件）或 类/函数（用于复合组件），但得到：未定义。你 可能忘记了从定义组件的文件中导出组件， 或者您可能混淆了默认导入和命名导入

我也试过了

import { ReactComponent as InfoIcon } from "../../assets/img/info_icon.svg";

但错误是一样的。 注意：svg的路径是正确的

编辑： 这是svg文件的内容：

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 161 384" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path id="patient-scrubs" d="M125.445,222.497l29.44,-0l-0,-74.998c-0,-26.916 -49.344,-40.813 -74.825,-40.813c-25.471,-0 -74.824,13.897 -74.824,40.813l0,74.998l31.826,-0l0,34.395l2.185,-0l0,57.672l81.627,0l-0,-57.672l4.571,-0l0,-34.395Z" style="fill:#9fd6d6;fill-rule:nonzero;"/><g id="patient-outline"><path id="patient-head" d="M79.725,91.416l0.371,0c21.792,-0.137 39.346,-17.915 39.199,-39.696l-0,-11.805c0.431,-21.557 -16.779,-39.475 -38.451,-39.907c-21.662,-0.432 -39.579,16.779 -40.011,38.441c-0.011,0.527 -0.011,1.055 -0,1.573c-0.001,-0.107 -0.001,11.468 -0.001,11.468c-0.305,21.717 17.113,39.62 38.893,39.926Zm0.311,-10.441c16.02,-0.103 28.926,-13.171 28.818,-29.185l0.001,-11.979c0.317,-15.897 -12.314,-29.047 -28.219,-29.364c-15.897,-0.317 -29.047,12.313 -29.364,28.21l0,12.906c-0.225,16.024 12.584,29.188 28.526,29.412l0.238,0Z" style="fill:#949fab;"/><path id="patient-body" d="M74.843,312.723l-0,66.056c-0,2.882 2.339,5.221 5.22,5.221c2.882,-0 5.221,-2.339 5.221,-5.221l-0,-66.056c-0,-2.881 -2.339,-5.22 -5.221,-5.22c-2.881,-0 -5.22,2.339 -5.22,5.22Zm-40.814,-50.854c-0.434,0.138 -0.893,0.221 -1.37,0.24c-0.82,0.033 -1.628,0.033 -2.42,0.001c-17.305,-0.656 -30.807,-15.187 -30.221,-32.477l0,-82.133c0,-12.49 8.69,-22.9 21.573,-30.489c17.451,-10.281 42.462,-15.536 58.472,-15.536c16.01,0 41.021,5.255 58.472,15.536c12.883,7.589 21.573,17.999 21.573,30.489l0,82.113c0.029,0.763 0.027,1.534 -0.004,2.283c-0.669,17.355 -15.272,30.882 -32.626,30.213c-0.481,-0.018 -0.944,-0.101 -1.382,-0.24l0,116.909c0,2.881 -2.339,5.22 -5.22,5.22c-2.882,0 -5.221,-2.339 -5.221,-5.22l0,-204.067c0,-2.881 2.339,-5.22 5.221,-5.22c2.881,-0 5.22,2.339 5.22,5.22l0,77.206c0.561,-0.179 1.162,-0.265 1.784,-0.241c11.591,0.447 21.344,-8.59 21.791,-20.195l-0.004,-1.797l0,-82.184c0,-9.047 -7.099,-15.996 -16.432,-21.493c-15.866,-9.347 -38.615,-14.091 -53.172,-14.091c-14.556,0 -37.305,4.744 -53.172,14.091c-9.332,5.497 -16.432,12.446 -16.432,21.493l0,82.184l-0.003,0.201c-0.447,11.591 8.587,21.352 20.195,21.792c0.526,0.021 1.052,0.021 1.585,-0c0.626,-0.026 1.23,0.06 1.793,0.24l0,-77.205c0,-2.881 2.34,-5.22 5.221,-5.22c2.881,-0 5.22,2.339 5.22,5.22l0,204.067c0,2.881 -2.339,5.22 -5.22,5.22c-2.881,0 -5.221,-2.339 -5.221,-5.22l0,-116.91Z" style="fill:#949fab;"/></g></svg>

---

您可能没有从

info\u icon.svg

文件导出任何内容您可以像这样导入svg

import InfoIcon from '../../assets/img/info_icon.svg';

---

注意省略的大括号。

您是否使用了CreateReact应用程序？因为将svg作为组件导入需要在CreateReact应用程序中捆绑的特定加载程序，或者需要手动安装

---

[编辑]：有关如何在react中使用SVG的详细信息，请阅读

查看我的答案，使用

{}

导入仅适用于导出内容的js文件。@ShmiliBreuer确定我在没有{}的情况下尝试过，但错误是相同的。它显示此错误未捕获DomeException:未能在“文档”上执行“createElement”：提供的标记名（'./assets/img/patient slim.svg'）不是有效名称。@C1X这是全部错误吗？您还可以显示您在组件中使用

InfoIcon

的位置吗？const-App=（）=>{return（）；}您可以尝试使用

const-App=（）=>{return（）；}

？我想没有，但我从其他开发人员那里继承了这个项目。要安装的加载程序是什么？我正在使用，如果您没有使用Webpack，您可以为您的捆绑程序找到一个加载程序：或者，您可以阅读本文，了解在react中显示svg的所有方法