Using SVG icons with Sage

June 30, 2017

I've been doing a fair bit of WordPress development recently, and I've really started to enjoy using Sage (v9 - which is currently in beta at the time of writing).

For those that don't know; Sage is a starter theme with a modern stack. Out of the box it provides SASS compilation, browsersync, ES6 for JavaScript and, my favourite feature, Laravel Blade as a templating engine. Using blade provides some great features anyway but it also allows us to use our own directives. One directive that I really like is Adam Wathan's Blade SVG package. This allows you to inline SVG icons right into your templates.

I liked it that much that I wrote a little composer package that brings the two together and allows you to use the @svg() directive inside your WordPress page templates. It assumes that you place your icons inside a resources/assets/icons directory in your theme directory and you can start using it straight away.

<!-- This... -->
<a href="/settings">
    @svg('cog', 'icon-lg') Settings
</a>

<!-- Renders this! -->
<a href="/settings">
    <svg class="icon icon-lg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <!-- ... -->
    </svg>
</a>

The majority of the credit for this goes to Adam Wathan for his awesome work on the blade svg directive and for more advanced usage you can check out his repository.

Links: