SVG file not changing color on hover in React 17-CodePudding

So, this is my first time using SVG files in React. At first, I didn't know how to simply import them but I followed an article online and imported and used it as such:

Home.js

import {ReactComponent as ReactLogo} from "./assets/arrow.svg"

<div className="last-row">
        <ReactLogo width="59" className="arrow"/>
      </div>

It is sized well. Now, I want to change the color on hover in CSS, but it doesn't work. It's neither blue nor white. Cursor pointer works.

Home.css

.arrow {
  fill: #blue;
}

.arrow:hover {
  fill:white;
  cursor: pointer;
}

I'm guessing the way I imported the SVG is not correct, but if I use it with an img tag in the JS file it doesn't work, and if I use it with an SVG tag it doesn't render at all.

What will be the most simple and efficient way to import and change color on hover? Note, it is a local SVG file and I have to do the hover effect on multiple different SVG files throughout my project.

CodePudding user response：

For anyone having the same issue as me,

At first, I didn't realize what to do until @antokhio guided me to look into my SVG file itself, and then I figured out all I needed to do was change fill and stroke values as needed, from none to current!

Follow this article for more guidance, on how to change colors of svg files: https://dev.to/abachi/how-to-change-svg-s-color-in-react-42g2