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.

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.