cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
raiobg
New Member

Components with SVG Files

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.

1 ACCEPTED SOLUTION

Accepted Solutions
PowerPuffKK
Resolver IV
Resolver IV

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:

 

<use fill=' "& If(Component1.IconActive = true, Component1.IconColourHexActive, Component1.IconColourHexDisabled) &"' fill-rule='nonzero' xlink:href='#a'/>

 

And this is the result:

 

Active - 

 

PowerPuffKK_0-1655583716637.png

 

Disabled/Inactive - 

PowerPuffKK_1-1655583744800.png

 

I have also exported the component I've built for you if that makes it easier 🙂 See attached 

 

If this answer helps, please give it a thumbs up. If it resolves your issue - please mark it as a solution to help future forum visitors 🙂

 

Thanks

Kristine

 

View solution in original post

1 REPLY 1
PowerPuffKK
Resolver IV
Resolver IV

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:

 

<use fill=' "& If(Component1.IconActive = true, Component1.IconColourHexActive, Component1.IconColourHexDisabled) &"' fill-rule='nonzero' xlink:href='#a'/>

 

And this is the result:

 

Active - 

 

PowerPuffKK_0-1655583716637.png

 

Disabled/Inactive - 

PowerPuffKK_1-1655583744800.png

 

I have also exported the component I've built for you if that makes it easier 🙂 See attached 

 

If this answer helps, please give it a thumbs up. If it resolves your issue - please mark it as a solution to help future forum visitors 🙂

 

Thanks

Kristine

 

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (3,060)