Unibutton, image in svg file

[markokas]

Hi all,

I would lie to use files/test.svg file as image.

How to assign svg file to button.

I try to make new item in ImageList, and define IconCls in server css. I can see image but somehow fill color not accepted  (is black instead green)...

what's wrong, or some other approach to change attributes of svg image?

Thank's in advance,

Marko.

 

 

 

[mhmda]

UniEvents

config.icon='files/images/copy.svg'

[markokas]

 

Some more details?

On which event, and custom css the same as is?

Best regards.

 

 

[Sherzod]

3 hours ago, markokas said:

Some more details?

On which event

Hello,

function beforeInit(sender, config)
{

}

 

[markokas]

 

I tried,  I can see svg icon on UnimButton, but it looks that attributes/style color, fill not accepted.

Allways get black color.

function beforeInit(sender, config)
{
  config.icon ="/files/test.svg";
  config.style='stroke:red; fill: green; color:red;  stop-color :red; flood-color:red;lighting-color:red;'
}

Thanks in advance fro any hint

 

Br, Marko

 

 

[Allen]

Is there a solution to this or will these always have to be black?

-Allen

[Sherzod]

On 4/22/2021 at 4:10 PM, markokas said:

Thanks in advance fro any hint

Sorry for the late reply.

17 hours ago, Allen said:

Is there a solution to this or will these always have to be black?

Do you have a simple testcase to check?

[Allen]

Sherzod;

I have arrived at the following as a solution for this, not sure if this is the best resolution however this is working for me.

.btnEditIcon {
  background-size: 14px auto;
  background-image: url("files/images/edit.svg"); 
  filter: invert(13%) sepia(100%) saturate(6101%) hue-rotate(345deg) brightness(97%) contrast(97%);
}

I used this online resource to convert a color to a filter.  Quick note, the filter is predicated on the svg image being black (or at least known.

-Allen