derekscott_mm/sage-nine-svg

WordPress package to enable a blade directive to use SVG images inline with Sage 9

         _______                     _______ __               _______ ___ ___ _______ 
        |     __|.---.-.-----.-----.|    |  |__|.-----.-----.|     __|   |   |     __|
        |__     ||  _  |  _  |  -__||       |  ||     |  -__||__     |   |   |    |  |
        |_______||___._|___  |_____||__|____|__||__|__|_____||_______|\_____/|_______|
        ===============|_____|========================================================                                                   

Sage SVG

Sage 9 comes standard with a version of Laravel's Blade templates., _(*1)

If you have never used Blade templates, you're in for a treat. They bring a much needed improvement to Wordpress theme development., _(*2)

This package builds onto your existing Sage 9 install by adding support for SVG inlining. While it's not the only package that does so, it does appear to be the only package that does not break Webpack 3+ functionality that also comes standard with Sage 9., _(*3)

Namely, using the SVGO loader, it by default is looking for SVGs that have been placed in the resources/assets/images directory. Where as other Sage SVG packages have you move your SVGs into resources/assets/icons or require you to deeply nest them in the images directory., _(*4)

Instead this package leaves all the configuring up to you! Best of all that configuring is simply prefixing your filename with a single directory name, ie: @svg('images/filename') or @svg('icons/iconfile') instead of being locked into one folder and out of webpack., _(*5)

Installation

You can install this package via Composer by running this command in the root of your Sage 9 installation., _(*6)

composer require derekscott_mm/sage-nine-svg

Getting Started

Once installed, the package will automatically register a blade directive to inline your SVGs., _(*7)

<a class="nav-item" href="/">
  @svg('images/Pumpkin_Logo', 'brand-logo')
</a>


<a href="/" class="nav-item">
    <svg class="icon brand-logo" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <!-- |pumpkin svg code| -->
    </svg>
</a>

In this example, we are loading an SVG icon., _(*8)

<a class="nav-item" href="/">
  @svg('icons/Horseman', 'tiny-icon')
</a>

Standing on the backs of giants

This repository is a wrapper for Adam Wathan's Blade SVG for Laravel, so a lot of the concepts from that repository are the same., _(*9)

If you would like to add in more functionality, or expand on this package, Adam's repository is going to be your number one asset., _(*10)

The only thing this libary does not support at the moment is non-inline SVG. But this is better anyway right?, _(*11)

Credits

Most of the work of this repository is down to Adam Wathan. This is just a wrapper to get it work with Sage 9 blade templates., _(*12)