Skip to main content

SVGs

SVG Sprite​

SVG Sprite Generator

The theme already has code in place to load the generated SVG Sprite onto every page. To add icons to the sprite, place svg icons into src/images/icons and the generator will create a sprite of all the icons in that directory.

To display an icon via php, you can use the prebuilt function found at inc/template-tags/print-svg.php.

<?php
print_svg(
  [
    'icon' => 'arrow-right',
    'width' => 20,
    'height' => 10
  ]
);
?>

To display an icon via React for use inside of block dev, you can use the prebuilt function found at src/blocks/utilities/icon.js. Make sure to import the component.

<Icon name="arrow-right" width="20" height="10" />;

SVG Transforms in CSS​

Utilizing svg-transform-loader, we can alter the strokes and fills of SVG images that are 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;
}

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