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.