0

I am facing an issue where I have a SVG image whose color attribute I've set to currentColor, but despite that I'm not able to control in my HTML.

Image SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
    <rect x="0" y="0" fill="currentColor" width="200" height="200"/> // I'm trying to replace this color
    <path fill="#FFFFFF" d="M133.17,79.76c-0.92,0-1.84, ..."/> // This path should always be white
</svg>

React code

import sdgHeartIcon from '.myImage.svg'

export default function MyComponent() {
    return (
        <img src={sdgHeartIcon} style={{ fill: 'red' }} />
    )
}

I've also tried setting backgroundColor and color attributes. If I modify the fill attribute within the SVG image directly, then that works, but I need to be setting it dynamically.

Sam
  • 1,130
  • 12
  • 36
  • [see this Q](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css), maybe it helps – KcH Sep 24 '22 at 16:53
  • 1
    It doesn't unfortunately. Thanks for the pointer though. – Sam Sep 24 '22 at 17:05
  • The point is you can't change styles like fill colors for `` tags. So you need to use one of the **filter methods** (e.g css hue shift or svg color matrix filters etc.) as described in the aforementioned posts. But you might also import your svg assets as inlined elements: [What is the best way to import SVG using React.JS](https://stackoverflow.com/questions/71006589/what-is-the-best-way-to-import-svg-using-react-js) – herrstrietzel Sep 25 '22 at 13:37
  • Not quite. I just had to import the image as `import { ReactComponent as HeartIcon } from '../../images/heart.svg'` and then render it using `` – Sam Sep 25 '22 at 13:50

0 Answers0