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