SVG Sprites

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

Defining our SVG Sprite

To define our sprite we start by defining a inline SVG at the top of our document

Inside the SVG we have a defs element which in turn includes the symbols. Inside each symbol we have the code for the actual SVG, we can get this code from illustrator or online tools as icomoon.

We made the SVG "invisible" by giving it no height and width.

Using the Defined SVG Sprite Icons

To actually use the icons we can use a code as follows:

<svg aria-hidden="true" focusable="false" class="icon icon-chevron"> <use xlink:href="#chevron" /> </svg> <svg aria-hidden="true" focusable="false" class="icon icon-check"> <use xlink:href="#check" /> </svg>

We define another SVG area, where we can add a specific class if needed. And then make use of the use element and Xlink to the icon ID defined in the symbol.

Then we can style the icons as such:

.icon { max-width: 50px; max-height: 50px; &-check { fill: #caffbf; } &-chevron { fill: #9bf6ff; } }

This will turn into the following Codepen.

SVG Sprites

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Defining our SVG Sprite

Using the Defined SVG Sprite Icons

Browser Support

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Defining our SVG Sprite

Using the Defined SVG Sprite Icons

Browser Support

Thank you for reading, and let's connect!