log1x/sage-svg

A simple package for using inline SVGs with Sage 10.

Sage SVG

Sage SVG is a simple package for using inline SVGs in your Sage 10 projects.

Requirements

• Sage >= 10.0
• PHP >= 7.4
• Composer

Installation

Install via Composer:

$ composer require log1x/sage-svg

Usage

By default, the following paths are checked for your SVG (in order):

• If passed an array containing id, it is assumed to be a WordPress attachment and is ran through get_attached_file().
• Your default asset manifest (usually mix-manifest.json).
• Path relative to config('svg.path') which is public_path() by default.
• Absolute web root path.

Blade Directive

Unless you require advance functionality from somewhere such as a Controller, the best way to use Sage SVG is with the Blade directive straight in your templates.

# Relative path (with dot notation) – resolves to `app/themes/<your theme>/dist/images/logo.svg` by default
@svg('images.logo')

# Absolute path from webroot with `w-32 h-auto` CSS classes and an aria-label
@svg('app/uploads/2019/07/logo.svg', 'w-32 h-auto', ['aria-label' => 'Logo'])

Helper

The easiest way to use SVG outside of a Blade template is the global get_svg() helper function. get_svg() will return false if no image is found.

# Relative path
$image = get_svg('images.logo');

# Absolute path from webroot with `w-32 h-auto` CSS classes
$image = get_svg('app/uploads/2019/07/logo.svg', 'w-32 h-auto');

# WordPress attachment (e.g. ACF field) with `my-logo` CSS class
$image = get_svg(
    get_field('logo_svg'),
    'my-logo'
);

App Container

While it's easier to use the Helper function, if it not available or sane for your scenario, you can render your SVG using the initialized SageSvg instance from the app container.

use Log1x\SageSvg\SageSvg;
use function Roots\app;

$image = app(SageSvg::class)->render('images.logo');

Configuration

The configuration file, svg.php, can be published using Acorn:

$ wp acorn vendor:publish --provider='Log1x\SageSvg\SageSvgServiceProvider'

You can read the DocBlocks in config/svg.php for more details.

Why another SVG Package?

Didn't you author Blade SVG Sage? Why another SVG package?

While I do have my fork of Blade SVG called Blade SVG Sage, I find it rather underwhelming due to the following reasons:

• Unable to handle WordPress attachments
• Unable to inline SVGs that aren't set in a specific path
• Unable to properly use the asset manifest.
• I know QWp6t

Bug Reports

If you discover a bug in Sage SVG, please open an issue.

Contributing

Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.

License

Sage SVG is provided under the MIT License.

sage-svg's Issues

Help with SVG path for typical WP setup

Relative path (with dot notation) – resolves to app/themes/<your theme>/dist/images/logo.svg by default
@svg('images.logo')

Using Sage 10, I have a typical Wordpress setup where all my svgs live in wp-content/themes/<my-sage-theme>/resources/images/svg/*.svg. Upon build, all images including svgs get dumped into public, at the root for some reason, not inside an images directory.

With that said, what would be the relative path? Is it relative to production or development?

I tried @svg('resources/images/svg/my-icon') and @svg('my-icon') – neither work.

svg not found - cache busting

Just started using sage10, so I'm not sure if this is a new feature or not, but when I run yarn build all images are appended with a cache busting suffix. @asset seems to handle this fine however @svg cannot find them once compiled for production, though it finds them after yarn dev just fine (when they do not have the suffixes).

[Feature Request] Use SageSVG for acf-composer block icons!

So while enjoying composing blocks A LOT, I can't help but want to use SageSVG's get_svg() with the Block register() icon.

So right now, in order to see the icon in the interface, I need to paste in the string of the SVG rather than use the beautiful helper function. I dug in a little and I think it has something to do with the asset() helper being used to resolve the path of the file, but also that get_svg() is returning an HTML element. I added a get_svg_string() but then ran into the asset() helper using the Filesystem as an issue.

THEN I went nuclear and tried just a plain file_get_contents() but the Block registers different in the view than the WP Admin (by design of course), so just to see if it would EVER work I threw in a gross if/then...and it DID work... but it's gross! Lol...

If you have an idea for some angle I can pursue for a PR, I'm out of ideas. I don't see how to use the configs path without including the Filesystem, but maybe I'm mistaken about what the actual problem is too.

Maybe there's even a 'no-duh' thing I can use for this situation and I'm just not aware of it... halp! =)

Images after the nuclear fix:

if customer logic without manifest got exception

need fix

wp-content/themes/casinorix/vendor/log1x/sage-svg/src/SageSvg.php:81

    protected function get($image)
    {
        if (asset($image)->exists()) {
            return trim(
                asset($image)->contents()
            );
        }

need that scenario works without asset($image)->exists(), so u can add params to config that not use manifest.

All svgs on same page render as the first svg directive

In this case all svgs renders as the facebook icon. If I comment out the first, all the svgs render as the instagram icon.
When looking into the public folder, the svgs are present.

    <a href="{{ get_field('facebook', 'options') }}" target="_blank">
        @svg('facebook', 'w-6 h-6')
    </a>

    <a href="{{ get_field('instagram', 'options') }}" target="_blank">
        @svg('instagram', 'w-6 h-6')
    </a>

    <a href="{{ get_field('twitter', 'options') }}" target="_blank">
        @svg('twitter', 'w-6 h-6')
    </a>

Not working with Acorn 4

Hello.

I'm using Sage 10 and got this error after updating Acorn to version 4:

Fatal error: Class Log1x\SageSvg\SageSvgServiceProvider cannot extend final class Roots\Acorn\ServiceProvider

Config not published when defining with --provider

Could just be a problem with my setup, but when i use

wp acorn vendor:publish --provider='Log1x\SageSvg\SageSvgServiceProvider'

it APPEARS to function, but then I don't see the config file show up. If I just choose it through the prompt, it does generate the file.

The reason I say it might be my setup is because I had the same problem with the ACF Composer package, but I just copy/pasted from the documentation instead of tried to fix it.

This time I just tried without the --provider argument and it worked!

@svg is not being parsed

log1x/sage-svg version: v1.0.6
roots/sage: 10.0.0-beta

I installed log1x/sage-svg package using composer.
But the @svg directive is not being parsed and rendered as raw string on the webpage.
I also use log1x/sage-directives and their directives are being parsed well.

  @hassub('icon')
    @sub('icon')
    @svg(157)
  @endsub

Dynamic classes ?

Hello,
Is there a way to add dynamic classes ?
Example: (:class="{'rotate-180': open, 'rotate-0': !open}")
Im trying to achieve this:
<svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>

New Sage 10 structure

The build directory has changed from dist/ to public/ in Sage 10, but the default here is still dist/. I know there's a ton of stuff you guys are updating, just wanted to leave this note here after fixing this for myself via the config file.