Use SVGs on React 17.0.1

Question

I'm trying to import an svg but it shows the error:

this is my import:

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

After, using the component in render function it shows this error:

react_devtools_backend.js:2430 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I also tried

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

but the error is the same. NOTE: the path of svg is correct.

EDIT: This is the content of svg file:

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

Did you used create-react-app? Because importing a svg as a componnent need a specific loader that is bundled in create-react-app, or need to be manually installed.

[EDIT] : read https://blog.logrocket.com/how-to-use-svgs-in-react/ for more information about how to use SVG in react

Answer 2

You are likely not exporting anything from your info_icon.svg file you can import an svg like this

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

Notice the omitted curly braces.