Use theme() function with background-image svg

[SergiArias]

Hi!

I was trying to use the theme defined colors in a background image but I cannot make it work.

I am using sass but using the interpolation function it should. Has anyone had success with this?

.arrow-down {
 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 29 23' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='#{"theme('colors.secondary')"}' d='M14.5,23L0,0h29L14.5,23z' /%3e%3c/svg%3e");
 @apply bg-contain bg-bottom bg-no-repeat;
}

And the css output:

.arrow-down {
    background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 29 23' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='theme('colors.secondary')' d='M14.5,23L0,0h29L14.5,23z' /%3e%3c/svg%3e);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}