Open henryruhs opened 4 years ago
In this day and age we need to use custom property values
@djmtype I don't get it... could you explain what you are talking about?
@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));
}
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");
}
I was not asking for keeping the vars inside the url...
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.
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.
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");
@conor-darcy for what it's worth I created a small plugin to handle that: https://www.npmjs.com/package/postcss-root-var
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")
@nevolgograd well, it is preserve: false
and not preserve: true
within the postcss-custom-properties
plugin.
@redaxmedia thx, but unfortunately result is the same
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%);
}
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?
Hey, I use this awesome plugin after processing variables with postcss-custom-properties ... to make it work together something like this is needed:
What I totally would love is a syntax like:
@TrySound Is there a way to rewrite this plugin or my postcss chain to make the easy syntax possible?
Thanks