Components with SVG Files

[raiobg]

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.

[PowerPuffKK · Accepted solution]

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 - 

Disabled/Inactive - 

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