ColdBox Elixir SVG

Extension to ColdBox Elixir that uses gulp-svg-sprite to deal with SVG images. Right now it can generate a sprite file out of individual SVG files. Consider it the image spriting technique but for SVGs. It's highly recommended to read these awesome articles to learn all about this technique:

• Icon System with SVG Sprites
• SVG symbol a Good Choice for Icons
• SVG use with External Reference
• SVG for Everybody

Install

npm install coldbox-elixir-svg --save-dev

Use

var elixir = require( "coldbox-elixir" );

require( "coldbox-elixir-svg" );

elixir( function( mix ) {
    mix.svgSpriteheet();
} );

This will use the extension's default options, which are to find .svg files inside an svg directory in your assets directory. It will output a sprite file named as sprite.svg to includes/svg which can then be included in your project's markup.

    <svg class="icon">
        <use xlink:href="/includes/svg/sprite.svg#icon-example"></use>
    </svg>

Configure

You can override the extension's settings by passing the following optional parameters like:

    mix.svgSpriteheet( src, output, pluginOptions );

src

Path to the directory that holds the individual SVGs. Set as null if the default is fine.

output

Path to the directory that will hold the generated spritesheet file. Set as null if default is fine.

pluginOptions

Options passed along directly to gulp-svg-sprite. Read the README for more info on these.

Example

This example sets custom source and output directories, and changes the generated file name to symbols.svg.

var elixir = require( "coldbox-elixir" );

require( "coldbox-elixir-svg" );

elixir( function( mix ) {
    mix.svgSpriteheet( "my/assets/directory/", "my/output/directory/", {
        mode: {
            symbol: {
                dest: ".",
                sprite: "symbols.svg"
            }
        }
    } );
} );

For more complex examples and all the svg-sprite documentation, check out its repo.

Versioning

Don't forget that you can use the mix.version command to version your SVG spritesheet.

elixir( function( mix ) {
    mix.svgSpriteheet();

    mix.version( "svg/sprite.svg" );
} );

ColdBox and cbsvg

This package works hand in hand with cbsvg, a ColdBox module for easily using svg icons in your projects. It is configured to use the same ColdBox conventions, so just box install cbsvg and use it with your spritesheet out of the box with no extra configuration!

Credits

• Laravel Elixir SVG Symbols for the initial repo that was forked.

Contributions and Bugs

Project tracking for this project can be found at the Ortus Solutions Jira. Please log all bugs, improvements, and features there.

Pull requests are welcome and encouraged. Please check on the Jira page before starting any large amount of work so your time isn't wasted.

Brad Wood (@bdw429s) has a great guide on submitting pull requests. If you are unsure where to go, in need of help, or have a question, come ask in the #box-products channel on the CFML Slack.