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
October Events

Mark Your Calendars

So many events that are happening this month - don't miss out!

Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Top Solution Authors
Top Kudoed Authors
Users online (2,098)