ReactJS SVG 图标加载失败并带有 svgr 以更改 SVG 填充动态

Question

I've been trying to use SVG in ReactJS for the past 2 hours but nothing seems to be working.

I'm using:

"react": "^17.0.2",
"react-dom": "^17.0.2",

"devDependencies": {
        "@svgr/webpack": "^6.0.0",
        "react-svg-loader": "^3.0.3",

Using create-react-app

I call the icon as:

import { ReactComponent as Logo } from '../../icons/logo.svg';
...
<Logo fill="white" />

And the error i get is:

./src/icons/logo.svg (./node_modules/@svgr/webpack/dist?-svgo,+titleProp,+ref!./src/icons/logo.svg)
TypeError: this.getOptions is not a function.

If i use it in an "img" tag, the icon shows, but I need to dinamically change the fill of the SVG. If there is a way on how i can load an svg and change the fill dinamically, please help and thank you.

Answer 1

Try to import it as a variable, and then include that variable in an img tag in the src attribute as shown here.

 import Logo from '../../icons/logo.svg'; <img src={Logo} alt="logo" />

or add your svg as tag element and change the fill using css