0

I am using NextJS 13 and next/image for my icons.

The icons are .svg.

import Image from "next/image";

and

<Image
              src="/assets/icons/icon.png"
              alt="Icon"
              width={100}
              height={100}
              style={{
                fill: "blue",
                backgroundColor: "red",
                borderWidth: "12px",
                borderColor: "yellow",
              }}
            />

The .svg of my icon:

<?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" width="122.88px" height="122.88px" viewBox="0 0 122.88 122.88" enable-background="new 0 0 122.88 122.88" xml:space="preserve"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.438,0c33.93,0,61.441,27.512,61.441,61.441 c0,33.929-27.512,61.438-61.441,61.438C27.512,122.88,0,95.37,0,61.441C0,27.512,27.512,0,61.438,0L61.438,0z"/></g></svg>

In the path of my svg there is no fill so nothing can override my fill: "blue" but still the icon color remains black. All other CSS styling work. I tried also .png instead of .svg but again I cannot do anything about the fillColor.

In my console I have this:


element.style {
    color: transparent;
    fill: blue;
    background-color: red;
    border-width: 12px;
    border-color: yellow;

Even when I change the color in console (instead of transparent I try orange), then still nothing happens.

Why I cannot change the fill colour of any svg or png icon/image?

Boq7
  • 71
  • 7
  • 1
    You can't change fill the property when loading you icon in an `` elements. Pngs can't be styled like svgs. Either inline your svg or use one of these approaches ["How can I change the color of an 'svg' element?"](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css ) – herrstrietzel Jun 30 '23 at 14:37

0 Answers0