Power Platform Community Forum Thread Details

Dear Community,

I imported an SVG Icon to save is as a component. Here I want to leverage the quality of components, e.g. that users can adapt the Icon Color to its own interests but also that they can adapt it if its enabled / disabled.

For this I created a component property which is IconColor and the input is Text

Additionally I created a component property which is IconColorDisabled which input is text.

If I add my IconColor property to the SVG Code as "Parent.IconColor, it works. This is a correct syntax for it

"data&colon;image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24'><defs><path id='a' d='M17.74 3.063a.487.487 0 0 0-.576.073L4.158 15.554a.522.522 0 0 0-.123.562.497.497 0 0 0 .461.32h.005l6.038-.054 3.35 5.384a.49.49 0 0 0 .514.224c.2-.04.355-.202.393-.408l3.197-17.981a.519.519 0 0 0-.253-.538zM5.77 15.405l9.801-9.356-5.008 9.313-4.792.043zm8.275 4.72l-2.651-4.263.027.015 5.048-9.39-2.424 13.638z'/></defs><use fill=' " & Parent.IconColor & "' fill-rule='nonzero' xlink:href='#a'/></svg>")

However, If I want to add additionally to the SVG Code the Color Property for Disabled, it does not work. In Other words, i cannot / dont know how to concatenate two component properties in the SVG Code.

I need to set the color property to something like <use fill=' " & Parent.IconColor & "' & '"Parent.IconColorDisabled "' & fill-rule='nonzero' xlink:href='#a'/></svg>") or something like that.

Does anyone know how to handle this?

Thanks in advance.

Categories:

Building Power Apps

Hi @raiobg,

Great question! I love working with SVG's.

So there are a couple of issues here - firstly, what is 'Parent' referring to - is this the name of your component? You have to reference the actual component - let's assume that my component is called Component1, it would be:

<use fill='"& Component1.IconColor &"'> (this is a shortened version of the code)

Secondly, you cannot pass colours from a colour picker into your SVG - the SVG only accepts colours in rgb (not RGBA) and HEX. So you could make IconColour a text property and ask users to pass a HEX value with the # - as an example "#9f9f9f". You say you have set your icon colour property to text so I assume you're aware of it.

And lastly - to do this, you'll need to use a conditional If() statement. Before you can do that, you'll need to add another property to your component which will be responsible for active/disabled. This would ideally be a boolean - if it's true, then the icon colour should be active, if false - then disabled. Here's how I usually put it together:

And this is the result:

Active -