Setting SVG Fill Color in a Component?

Elements Component Development
1

I have been building a cookie consent pop-up that includes an embedded SVG. Currently, the fill color for this SVG is the only part of the pop-up that is hard-coded, and I’d like to be able to set the color from a property.

I have created the property, but every time I try, it fails to set the fill color.

Any ideas out there?

<svg class="-mb-28 ml-4 h-28 w-28"
viewBox="0 0 24 24"	
xmlns="http://www.w3.org/2000/svg" 
fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd"
>
<path fill="#aeb0a9" fill-opacity="0.4" d="M12,1 C12.2108325,1 12.4216651,1.04320503 12.6141643,1.12529458 L21.2445485,4.57737628 C22.252878,4.97918303 23.0045418,5.91673213 22.9999793,7.04870385 C22.9770419,11.3346426 21.107049,19.1763551 13.2099954,22.7407698 C12.4445817,23.0864101 11.5554183,23.0864101 10.7900046,22.7407698 C2.89295103,19.1763551 1.02295809,11.3346426 1.00002066,7.04870385 C0.99545819,5.91673213 1.74712202,4.97918303 2.75545155,4.57737628 L11.390419,1.12529458 C11.5783349,1.04320503 11.7891675,1 12,1 Z M12,3.88609584 L12,20.2219167 C18.3249761,17.3315004 20.0253864,10.9414768 20.0666362,7.10919089 L12,3.88609584 C12,3.88609584 12,3.88609584 12,3.88609584 Z"></path>
 </svg>

The fill="#aeb0a9" is what I’m trying to set, but I’m doing something wrong getting the color from the color property.

2

Yeah, SVG’s can be nifty little buggers :lady_beetle:. Using inline styles instead of inline attributes might do the trick.

<svg class="ml-4 h-28 w-28" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" style="fill: #aeb0a9; fill-opacity: 0.4;">
    <path d="M12,1 C12.2108325,1 12.4216651,1.04320503 12.6141643,1.12529458 L21.2445485,4.57737628 C22.252878,4.97918303 23.0045418,5.91673213 22.9999793,7.04870385 C22.9770419,11.3346426 21.107049,19.1763551 13.2099954,22.7407698 C12.4445817,23.0864101 11.5554183,23.0864101 10.7900046,22.7407698 C2.89295103,19.1763551 1.02295809,11.3346426 1.00002066,7.04870385 C0.99545819,5.91673213 1.74712202,4.97918303 2.75545155,4.57737628 L11.390419,1.12529458 C11.5783349,1.04320503 11.7891675,1 12,1 Z M12,3.88609584 L12,20.2219167 C18.3249761,17.3315004 20.0253864,10.9414768 20.0666362,7.10919089 L12,3.88609584 C12,3.88609584 12,3.88609584 12,3.88609584 Z"></path>
</svg>```
3

@handshaper Robin is this what you need, you either enter the color or hex, or I converted hex to tailwind colors, or I asked AI to provide me with the nearest colors, I then created the properties UI

the text field is just enter the hex #238912 etc

You cant use tailwind colors

they are pretty close

4

@upssjw Aloha Steve, so what you are saying is that you can’t using the standard Elements color picker because you need to enter a HEX color value, correct?

5

Yes you need hex, you can have my converter if it’s not over the top for your project, inside this code

In work now though

6

Hi @handshaper

The way I’d do this, for this SVG at least, is by removing the fill attribute on the <path> and then add a fill-{color}-{brightness} class to the <svg>, like so:

<svg
  class="-mb-28 ml-4 h-28 w-28 fill-red-500"
  viewBox="0 0 24 24"	
  xmlns="http://www.w3.org/2000/svg" 
  fill-rule="evenodd"
  stroke-linejoin="round"
  stroke-miterlimit="2"
  clip-rule="evenodd"
>
  <path
    fill-opacity="0.4"
    d="M12,1 C12.2108325,1 12.4216651,1.04320503 12.6141643,1.12529458 L21.2445485,4.57737628 C22.252878,4.97918303 23.0045418,5.91673213 22.9999793,7.04870385 C22.9770419,11.3346426 21.107049,19.1763551 13.2099954,22.7407698 C12.4445817,23.0864101 11.5554183,23.0864101 10.7900046,22.7407698 C2.89295103,19.1763551 1.02295809,11.3346426 1.00002066,7.04870385 C0.99545819,5.91673213 1.74712202,4.97918303 2.75545155,4.57737628 L11.390419,1.12529458 C11.5783349,1.04320503 11.7891675,1 12,1 Z M12,3.88609584 L12,20.2219167 C18.3249761,17.3315004 20.0253864,10.9414768 20.0666362,7.10919089 L12,3.88609584 C12,3.88609584 12,3.88609584 12,3.88609584 Z">
  </path>
 </svg>

You can see this in action on Tailwind Play.

There are a couple of other ways to solve this, but I think this is the easiest solution in this instance.

If you’re building a custom component you can of cause hook up a color control to dynamically set the fill-red-500 class, let me know if you need help with that :slight_smile:

7

Aloha @ben Yes, I’m doing this in a custom component, so I’d be very interested to see how to hook up the standard color control to set the fill color as that will be much more user friendly. I currently just have a text field into which the HEX color code is entered, which works but would be more prone to errors if someone mistypes.

I’d also really like to be able to specify the OPACITY for the SVG as well.

8

Like that, means you could use fill-red-500 as an id in elements and use the json Color ?

9

Sure thing! Here’s a video showing how to do a custom component for your SVG with color and opacity controls (and sizing and margin 'cos… why not!) :slight_smile:

Here’s a download link for the project.

Enjoy :smiley:

1 Like
10

@ben This looks great, except I cannot get the MARGIN settings to work as I’m depending on being able to set a NEGATIVE margin in order to move the SVG where I want it. I have integrated your code with mine and everything works as expected except the margin.

I’ll PM you the project with the code if you want to take a look.

12

@ben @handshaper

I think this adds padding and not margin

13

@handshaper I added mode margin

14

Great Steve, I did also get this all integrated and also got “opacity” added for the background color. I needed to add your "mode": "margin", code to Ben’s in order to get the margins to work with negative values. Thanks for that catch.

15

I started working on this but got bored

elementsapp://downloadDocument/208W7k3WGkOf

16

This must auto revert to p, I used my name and it still used p and added padding, only the {{value}} is recognised, the “mode” sets m but without is p

  {
                    "title": "Margin",
                    "id": "margin",
                    "format": "steve-{{value}}",
                    "themeSpacing": {
                        "default": {
                            "base": {}
                        }
                    }
                }```
17

@ben Any thoughts on why the properties for the margins are in fact setting the padding instead. Steve figured out a way to fix it by setting the mode, but we are curious why this is not working as expected?

18

Steve has figured it out — I should have been using "mode": "margin" instead of format.

The format property has no effect on the standard themeSpacing control.

Note that format does work on themeSpacing when combined with "mode": "single".

Hope that makes sense! Let me know if you have more questions :slight_smile:

19

@ben your code used format, it did not adjust margin but padding even though you used m-{{value}} it reverted to padding
Is that wrong

20

@ben, I tried using "mode": "single" for the margin, but it did not work. The only thing that worked is setting it to "mode": "margin".

Does the format piece of code still need to be there, or can it be deleted?

21

Delete and try it not tried yet working so away from my Mac