🍰SVG Sprites

SVG (Scalable Vector Graphics) sprites are a modern technique for reducing the number of HTTP requests made by a website by combining multiple images into a single file. This results in faster loading times and reduced bandwidth usage.

One of the primary benefits of SVG sprites is that they are resolution independent, meaning they can be scaled up or down without losing quality. This is in contrast to traditional raster images, such as PNGs, which can become pixelated or blurry when resized.

SVG sprites also offer more flexibility in terms of styling and manipulation. They can be easily modified using CSS, and individual images within the sprite can be selectively displayed using the <use> element.

As you can see, SVG sprites offer a number of advantages over traditional image sprites, making them a useful tool for optimizing the performance of modern websites.

How it works in WP Rig Toolkit

Every time you bundle there (npm run bundle) or regenerate files (npm run dev) it takes .svg icons from 📂 /assets/images/src/icons/ and generate svg sprite using SVG Store.

Usage

For example you placed icon-phone.svg 📂 /assets/images/src/icons/ and generated svg sprite.

Use following code template in your frontend to output it.

Make sure you use used the same name as file called (like #icon-phone below for icon-phone.svg).

<svg aria-hidden="true" width="16" height="16">
	<use xlink:href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/icons/sprite-svg/sprite.svg?ver=<?php echo esc_attr( wp_get_theme()->get( 'Version' ) ); ?>#icon-phone"></use>
</svg>

Also please use the same width and height attributes as your icon has. You can easily find it by opening your icon in any code editor. Please pay attention on viewBox attribute.

Here you can see that our icon has dimensions 16x16

How to fill icon by custom color?

Your icons can be colored (and contain multiple colors) but sometimes you have a simple icon (like phone handset or envelope) and you want to apply different colors to the same icon on different pages.

To achieve this simply delete <style> part in your source icon and then regenerate sprite.

Also please remove unnecessary classes like class="st0" at the screenshot below.

This will make you icon black but you can apply any color through fill CSS property.

To simplify and unify the process I recommend you to create CSS classes in the assets/css/src/general-styles_colors.css so you can simply apply necessary color through html markup.

Example

.fill--orange {
	fill: var(--color-theme-orange) !important;
}

<svg aria-hidden="true" width="16" height="16" class="fill--orange">
	<use xlink:href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/icons/sprite-svg/sprite.svg?ver=<?php echo esc_attr( wp_get_theme()->get( 'Version' ) ); ?>#icon-phone"></use>
</svg>

Problem Solving

Icon not visible and I don't know to do

First please check generated sprite /assets/images/icons/sprite-svg/sprite.svg

There you should be able to find your icon.

If you cannot that means that for some reason sprite hasn't been regenerated. You can try to re-run npm run dev.

Icon not visible but presented in sprite.svg

If you checked generated sprite.svg and see your icon but dont see it in frontend, it might be because your icon created from stroke.

On the image you may see that phone made by stroke.

Convert stroke to shape using Object > Path > Outline Stroke

You can also merge parts (if needed) using Pathfinder window (can be opened by Window > Pathfinder). This may decrease the size of the icon (because you getting rid of unnecessary dots in vector).