在 React 17.0.1 上使用 SVG

Question

我正在嘗試導入 svg 但它顯示錯誤：

這是我的進口：

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

之后，在渲染 function 中使用組件會顯示此錯誤：

react_devtools_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>

Answer 1

你用過 create-react-app 嗎？ 因為導入一個 svg 作為組件需要一個特定的加載器，它捆綁在 create-react-app 中，或者需要手動安裝。

[編輯]：閱讀https://blog.logrocket.com/how-to-use-svgs-in-react/了解有關如何在反應中使用 SVG 的更多信息

Answer 2

您可能不會從info_icon.svg文件中導出任何內容，您可以像這樣導入 svg

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

注意省略的花括號。