SVG Transforms in CSS

Utilizing svg-transform-loader and postcss-move-props-to-bg-image-query, we can alter the strokes and fills of SVG images set as background images in our CSS.

How to Use It

In your CSS, you'll set the SVG background image as normal:

.img {
  background: url(img.svg); 
}

The bonus here is that you can then alter the stroke and/or fill by adding declarations for -svg-mixer-fill and -svg-mixer-stroke:

.img {
  background: url(img.svg); 
  -svg-mixer-fill: red;
  -svg-mixer-stroke: #000;
}

As a bonus bonus, this allows us to use Tailwind colors set in the Tailwind Config file:

.img {
  background: url(img.svg); 
  -svg-mixer-fill: theme( 'colors.wds.orange' );
}

Now we can set SVG background images and adjust their colors with just a few lines of CSS!