Using SVGs instead of an icon font

Shoptimizer 2.2.6 introduces an option to use SVGs instead of the icon font the theme previously used, Rivolicons. This is useful for two reasons:

• It means a faster site. Without loading font files and CSS, it cuts down on the number of requests.
• More flexibility. We use Heroicons but you can use any SVG icon, so you’re not limited to a particular set.

Using SVGs in the Secondary Menu

Icons are user controlled in two different areas. The Secondary Menu. And the Below Content widget area. Let’s add SVG icons to both.

Go to: Appearance > Menus – and select the Secondary Menu in the dropdown.

You’ll need to also click on Screen Options at the very top of the Menus screen and ensure that Description is ticked.

Edit a menu item and we’ll need to add a new SVG icon into the Description field for each and ensure that the CSS Classes field is empty.

Here is what it will look like:

Note that the CSS Classes field is empty now.

And all that SVG code, where can you find that? Thankfully, Heroicons makes this very easy. You can search for an icon, hover over it and click Copy SVG.

Then, you can paste it into the Description field.

We’re using the Medium set in the theme demo but feel free to mix this up. Or indeed, use a different icon set entirely.

To make it even easier, this is the SVG code we’re using for each.

My Account:

Customer Help:

Checkout:

Using SVGs in the Below Content Widget Area

You can now also replace the icons in the Below Content widget area with SVGs also.

Just go to Appearance > Widgets > Below Content and remove any previous ri references (this is the icon font) – and drop in SVG code instead.

It should look like this:

Note: when pasting in SVG markup, WordPress may suggest changing viewBox to viewbox – it doesn’t like the capitalization.

This is the SVG code we use for each:

Free Worldwide shipping:

Easy 30 days returns:

International Warranty:

100% Secure Checkout:

Final step

When all the font icons have been replaced, the final step is to disable Rivolicons in the speed settings. There’s no need to load these icon font files anymore.

Go to: Appearance > Customize > General > Speed Settings to do that.