React, React-svg. How to restore original colors

I have a set of .svg icons with different colors for different paths. Currently I’m using react-svg package to render them and it looks something like this:

<span>
    <ReactSVG
       src="/icons/setting.svg"
       beforeInjection={svg => {
         svg.classList.add("svg-classname");
       }}
    />
</span>

This works fine. Now I want to change all path colors to gray and bring all original colors back by user hover, Which I am trying to achieve in my scss by doing:

.svg-classname {
      path,
      rect,
      circle {
        fill: #888;
        color: #888;
      }
      &:hover {
        path,
        rect,
        circle {
          fill: initial;
          color: initial;
        }
      }
}

This clearly doesn’t work! Im not an expert with svgs so any suggestion (even outside of using react-svg) are truly welcome.

Answer

A simple D3 work-around for your problem:

d3.selectAll('.my-svg-icon path')
  .each(function() {
    const path = d3.select(this);
    const originalColor = path.attr('fill');
    path.attr('fill', 'gray')
      .on('mouseenter', () => path.attr('fill', originalColor))
      .on('mouseleave', () => path.attr('fill', 'gray'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class="my-svg-icon">
  <path d="M 10,10 H 50 V 50 H 10 Z" fill="red"/>
</svg>
<svg class="my-svg-icon">
  <path d="M 10,10 H 50 V 50 H 10 Z" fill="blue"/>
</svg>