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

Is it possible to use variables? #11

Closed in-in closed 7 years ago

in-in commented 9 years ago

Like this

.fill-stroke:before {
  background-image: svg("loupe", "[fill]: $main-blue");
}
neonick commented 9 years ago

Subscribe to the issue too, I think it is necessary.

Blindmikey commented 9 years ago

Subscribed. Agree this would be very helpful.

Ser-Gen commented 9 years ago

Include postcss-simple-vars before postcss-svg in your build process.

input.pcss

$main-blue: #1782aa;

.fill-stroke:before {
    background-image: svg("loupe", "[fill]: $main-blue");
}

output.css

.fill-stroke:before {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22%231782aa%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
maddesigns commented 9 years ago

if you are using Sass this works:

$main-blue: #1782aa;

.fill-stroke:before {
    background-image: svg("loupe", "[fill]: #{$main-blue}");
}
Icewild commented 8 years ago

postcss-simple-vars should be included before postcss-svg And you can do this like:

$main-blue: blue;

.fill-stroke:before { background-image: svg("loupe", "[fill]: $(main-blue)"); }

jonathantneal commented 7 years ago

Use variables with SVG Parameters. See example