laravel-elixir-svg-sprite

v0.1.4

Published

4 years ago

Laravel Elixir wrapper for gulp-svg-sprite

0High
0Medium
0Low

jholl

gulp laravel elixir svg

Laravel Elixir SVG Sprite

Extension to Laravel Elixir that wraps gulp-svg-sprite

Install

npm install laravel-elixir-svg-sprite --save-dev

Use

In your Laravel gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-svg-sprite');

...

elixir(function(mix) {

    mix.svgSprite();

});

This will use the extension's default options, which are to find .svg files inside an svg directory in your resources folder (either Laravel 5's default or your own defined in elixir.json). It will output the spritesheet files svg-include.svg and svg-include.html (for previewing) to public/svg/symbols which can then be included in your main layout file, right after <body>.

<body>
    @if(file_exists(public_path() . '/svg/svg-include.svg'))
        <?php include(public_path() . '/svg/svg-include.svg'); ?>
    @endif
    ...

for an easier include, see option: bladePartial

You can then use the symbols freely in your app:

<svg class="styling-class">
    <use xlink:href="#symbol-id"></use>
</svg>

Configure

Of course you can override the extension's settings and pass some additional options by passing parameters. It might end up looking something like this in your project gulpfile.js:

mix.svgSprite({
    srcDir: './resources/assets/svg/',
    outputDir: './public/icons/',
    bladePartial: 'svgicons',
    svg: {
        xmlDeclaration: false,
        doctypeDeclaration: false
    },
    shape: {
        id: {
            separator: '-',
            generator: 'icon-%s'
        }
    },
    mode: {
        symbol: {
            prefix: '.icon .%s',
            inline: true,
            sprite: 'svg',
            dest: 'svg'
        }
    }
});

... as an example

srcDir

The path to the directory that holds the original separate SVG files.

outputDir

Path to the directory that will hold the generated spritesheet file.

rename

By default the generated file is called svg-include.svg. Change this to change the name of the files. Don't include any extensions as this will only change the file basenames.

bladePartial, bladePartialDir

By default the generated file svg-include.svg will be copied to a blade partial. This way you can include it in your main blade template like so:

<body>
    @include('partials.svg-include')

You can pass the option of a different file name (string) such as bladePartial: "svgicons" and the extension .blade.php will be added automatically, resulting in svgicons.blade.php. You can pass the option of a partials directory (string) such as bladePartialDir: "./resources/views/some/dir/" or by default will use ./resources/views/partials/. You can deactivate blade partials by passing false (boolean) as such bladePartial: false.

The rest are options that are passed along to gulp-svg-sprite and the parent svg-sprite to override the defaults. Read the README for more info on those.

Credit goes to

jkphl for his stable gulp-svg-sprite Gulp plugin.
waldemarfm for his laravel-elixir-svg-symbol package which I ripped as template for creating this wrapper.
All contributors to the Laravel Elixir and Laravel projects.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme