SVG sprites workflow

Hi, lately I was learning about SVG sprites. I did my own configuration to automate a custom design workflow with Sketch app and gulp-svg-sprite and integrate it in Sage 8.5.3 workflow (sorry for work over outdated version of Sage, I’m outdated myself).

For those wich want to design their own icon sets, it may be useful:

I’m a aethernal begginer, so sure it can be improved a lot. Any comments, critics and improvements are welcome.

3 Likes

Dope!

(post must be 20 chars)

2 Likes

Nice! Are there still significant performance improvements when HTTP2 is used?

1 Like

Thanks, @strarsis! I have no much knowledge about HTTP/2. As far as I know, multiplexing make sprites mostly useless. For an HTTP/2 strategy, maybe will be better to come back to separated SVG files, since they can be requested asynchronously.

In that case, another workflow would be configured without gulp-svg-sprite. Just gulp-sketch will be enough to create SVG files and Mustache to create a scss template. Indeed, at this moment, separated SVG are created at your-theme-dir/custom-icons-for-sage/dist/images/.

As I said, I don’t have much knowledge about it. Any thought will be welcome.

1 Like

I doesn’t hurt to have everything all in one file, but I’d say with http2 correctly configured you might not need sprites. Would probably be such a small difference I’d say use the tool that works for you!

For our Sage 9 sites, I made an @icon blade directive that just grabs the file contents of an icon.blade.php file that actually just has SVG code, so I can inline everything. No requests, and the code is THEN in the page cache, which is the quickest usually :+1:

2 Likes

@JulienMelissas:
This project?:

1 Like

No, we don’t use that, but that looks pretty cool too!

Super workflow! I need to migrate to Sage 9 ASAP.

1 Like

Hey @JulienMelissas!

I wanted to see if you could share your method of how to inline svg. I seem to missing the mark following other Sage 9 svg threads because:

  • I don’t know what directory to store my svg file
  • I don’t know where to add snippets to get the inline to work

Thanks!

Happy to do it!

It’s quite simple:

  1. In your resources/views folder make an icons folder.
  2. Add a blade file like icon-name.blade.php, this is where you’ll put your icon
  3. Copy the SVG code (I like to use https://jakearchibald.github.io/svgomg/ to optimize them before I do this) into the file.

Anywhere you need the icon just call @include('icons.icon-name') and Blade will pop it right in there for you!

2 Likes

I guess above I said I made an @icons directive. I don’t think I’ve actually done that haha, but it probably wouldn’t be too hard to pull off.

I made an @icons directive, although it’s…maybe not great:

// config/assets.php
'path' => get_theme_file_path().'/dist',

// app/helpers.php
function locate_asset($asset)
{
   return trailingslashit(config('assets.path')) . sage('assets')->get($asset);
}

// app/setup.php
sage('blade')->compiler()->directive('icon', function ($asset) {
    $asset = trim($asset, " '\"");
    $asset = str_replace("'", "\"", $asset);

    /**
    * There isn't a good way to break up this string, so we're
    * going to ignore standards for a bit.
    */
    // @codingStandardsIgnoreStart
    return '<?php $asset = "' . $asset . '"; $true_asset = ' . __NAMESPACE__ . '\\locate_asset($asset); ?><span class="a-icon a-icon--<?= basename($asset, \'.svg\') ?>"><?= file_get_contents($true_asset); ?></span>';
     // @codingStandardsIgnoreEnd
 });

Usage:

@icon('images/icon-search.svg')
// or if you want to process variables...
@icon('images/social/'.$network->slug.'.svg')

Also made a simple @inline directive that doesn’t try and do the wrapping stuff:

// app/setup.php
sage('blade')->compiler()->directive('inline', function ($asset) {
    $asset = trim($asset, " '\"");
    return "<?= file_get_contents(". __NAMESPACE__ . "\\locate_asset('" . $asset . "')); ?>";
 });
8 Likes

@JulienMelissas Thanks! That was quite simply actually!

@alwaysblank After I add the snippets to the assets.php and helpers.php successfully, I add the snippet to setup.php and get this error:

Fatal error: Uncaught ReflectionException: Class sage.blade does not exist in…

Is there something else I need to avoid this error? Also, in what directory do you save your svgs?

1 Like

My mistake, didn’t realize this was for Sage 8. These were written for Sage 9. AFAIK Sage 8 doesn’t support Blades and/or directives.

@alwaysblank I am using Sage 9 and the mistake was mine: I inserted the directive outside of the “Setup Sage options” function that starts with

add_action('after_setup_theme', function ()...

After putting it inside the function, the directive worked as expected! Thanks.

@alwaysblank: So this can be used as a replacement for Log1x/blade-svg-sage (because there is a blocking issue with production hashes right now)?

I think so, I primarily use it to inline SVGs, so it should work fine for that. Never used it with sprites, but I don’t see any reason why they wouldn’t work.

It would be nice if this could be shipped as a composer dependency for the sage9 theme so it can be easily installed using composer.

1 Like

Thanks much for this, man. Love it.

1 Like