search

Pavliko / postcss-svg

PostCSS plug-in which to insert inline SVG to CSS and allows you to manage it colors.
http://pavliko.github.io/postcss-svg/
Creative Commons Zero v1.0 Universal
124 stars 23 forks source link

rgb values cannot be passed as parameters #39

Closed lazd closed 7 years ago

lazd commented 7 years ago

SVG:

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 8' enable-background='new 0 0 10 8' xml:space='preserve'><rect style="fill:var(--color,black)" width="100%" height="100%"/></svg>

CSS:

.square::after {
    content: url("embed/Check.svg" param(--color rgb(1,1,1)));
}

Result:

.square::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 8' enable-background='new 0 0 10 8' xml:space='preserve'%3E%3Crect style='fill:black' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

However, if blue or #FFF is passed, everything works as expected.

I'll send a PR that fixes this shortly.