0

I'm trying to add a class to specific path of a svg that change the fill of that path when added

 img {
      align-self: center;
      justify-self: center;
      .dynamic {
        fill: #00c7b1 
      }
  }
<img src={../img.svg} />

SVG

<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="dynamic" fill-rule="evenodd" clip-rule="evenodd"18.1389 15.3339 19.9546 13.0869 20.3811C10.4177 20.8878 8.98749 20.8545 6.36187 20.3638C4.0967 19.9404 2.38277 18.1252 1.97843 15.8959L0.474201 7.6027C-0.0350924 4.79483 1.65655 1.89715 4.59493 1.32749Z" fill="#515151"/>
    <path class="dynamic" fill-rule="evenodd" clip-rule="evenodd" d="M6.36914 14.7621 6.36914 13.8184 6.36914 12.6542V7.56025ZM8.90815 7.91156V12.3029H9.81494V7.91156H8.90815Z" fill="#515151"/>
</svg>
Professor Abronsius
  • 33,063
  • 5
  • 32
  • 46
Yosef
  • 21
  • 2
  • You cannot nest a class within the definition for the `img` as you have tried here. Declare the `dynamic` class separately – Professor Abronsius Jul 28 '21 at 05:31
  • Are you using some preprocessor as your CSS as shown isn't valid. – A Haworth Jul 28 '21 at 05:46
  • You can't directly change the color of a path in an img src from file as you are trying to do. There are however workarounds - from inlining the svg to changing its fill color to currencolor to filtering and masking. See [link]https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element and let us know if you still can't find a solution. – A Haworth Jul 28 '21 at 06:05

0 Answers0