Simplify usage with var(--color)

[henryruhs]

Hey, I use this awesome plugin after processing variables with postcss-custom-properties ... to make it work together something like this is needed:

@svg-load icon-search url('@mdi/svg/svg/magnify.svg')
{
	fill: var(--color);
}

&:after
{
	background: svg-inline(rs-icon-search) center no-repeat;
}

What I totally would love is a syntax like:

&:after
{
	background: svg-load('@mdi/svg/svg/magnify.svg', fill = var(--color)) center no-repeat;
}

@TrySound Is there a way to rewrite this plugin or my postcss chain to make the easy syntax possible?

require('postcss-custom-properties')(
{
	preserve: false
}),
require('postcss-inline-svg')(
{
	paths:
	[
		'node_modules'
	]
}),

Thanks

[djmtype]

In this day and age we need to use custom property values

[henryruhs]

@djmtype I don't get it... could you explain what you are talking about?

[djmtype]

@redaxmedia I was supporting you.

We need a simpler method like your example. Right now, the a custom property, var(--primary-color), for fill won't get passed. It will be ignored.

.example {
    background: svg-load('img/icon-arrow.svg', fill=var(--primary-color));
}

[hudochenkov]

CSS doesn't support url interpolation. This CSS is not valid:

.up {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill=var(--primary-color) %3E...%3C/svg%3E");
}

[henryruhs]

I was not asking for keeping the vars inside the url...

[hudochenkov]

Are you using them as preprocessor variables (like $var) and not custom properties? Then run PostCSS plugin, which replaces them to actual values, before postcss-inline-svg. There is no way postcss-inline-svg will know what variable values, and it will not replace it.

[henryruhs]

Why on earth should something be impossible that can be done with 2 lines of code by switching to 1 line of code? This plugin should just accept another syntax and that's all I am looking for. I don't mind about CSS support or whatever, I want the hex values hard coded like this plugin does anyway.

[conor-darcy]

Yes, this would be a great feature.
--color: #ABCDEF;
background: svg-load('@mdi/svg/svg/magnify.svg', fill=var(--color)) center no-repeat;

would become:
background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill=#ABCDEF %3E...%3C/svg%3E");

[mdmoreau]

@conor-darcy for what it's worth I created a small plugin to handle that: https://www.npmjs.com/package/postcss-root-var

[nevolgograd]

Did anyone manage to make it work with css-vars?
@redaxmedia i've tried your approach and it didn’t work for me, still see var(--color) in my inline svg
@mdmoreau same for your tool

guys, any advice?

Config:

require('postcss-custom-properties')({
  preserve: true
}),
require('postcss-inline-svg')({
  paths: ['src'],
  removeFill: true,
  removeStroke: true
})

Css:

@svg-load icon url(assets/icons/download.svg) {
  path {
    fill: var(--color-W0);
    stroke: var(--color-W0);
  }
}

background-image: svg-inline(icon);

Result:

background-image: url("data:image/svg+xml;charset=utf-8*****fill=%27var%28--color-W0%29%27 stroke=%27var%28--color-W0%29%27/%3E %3C/svg%3E")

[henryruhs]

@nevolgograd well, it is preserve: false and not preserve: true within the postcss-custom-properties plugin.

[nevolgograd]

@redaxmedia thx, but unfortunately result is the same

[henryruhs]

I found this "black magic" that lets you change the color of SVG without touching the fill attribute. I started using CSS filter to invert black SVG to white and later on found this generator to apply hex colors:

See: https://codepen.io/sosuke/pen/Pjoqqp

Red colored SVG would look like:

.svg-on-fire {
    filter: invert(99%) sepia(100%) saturate(18%) hue-rotate(315deg) brightness(104%) contrast(100%);
}

[WebMechanic]

sad to see there appears to be fix from the plugin...

@henryruhs filter affects the whole element, not just the background-image, so this "magic" is not useful for elements with other contents.

the question is: how often in one page and one stylesheet do you need to recolour the background image? and how many are even just monochrome?