SVG Theme Colour Error

Hi all,

I've created a couple of SVG's, and as part of the colours I'd like to use the built in themes i.e. --neutral-50

If I put the below within the paint field under stroke, it applies correctly... :slight_smile:

var(--neutral-50)

However, I get a props warning stating:

stroke.paint: does not match format for color

image

Can I safely ignore it as it seems to work fine, or is there a 'better practice way' to do it?

Thanks!
Alex

You can safely ignore it. It is just warning you that the value you have provided doesn't match the regex pattern for a color, as the designer is expecting a string in the form #XXXXXXXX. It will resolve to the correct format when the CSS takes over in the client.

1 Like

Note that this is not always going to be the case for such warnings. Some props do have a forced type.
So its good taht you asked :slight_smile: Though if you see it works than it should always work, but be sure to also test it in the browser and not jsut the designer.

2 Likes