About

Laravel Elixir extension for generating SVG symbols sprite using gulp-svg-symbols.

installation

Install the package with NPM or yarn:

$ npm install @pixelindustries/laravel-elixir-svg --save-dev

# or with yarn:

$ yarn add @pixelindustries/laravel-elixir-svg --dev

Usage

This package does not expose an API of itself. Just by requiring the module Laravel-elixir's mix API will be extended with a svg task runner:

// First, require Elixir
const Elixir = require('laravel-elixir');

// Now require the extension script
require('@pixelindustries/laravel-elixir-svg');

// All set 'n ready to go
Elixir((mix) => {
	mix.svg(options); // @param {object} options (optional)
});

Options

Visit the gulp-svg-symbols github page to read more about all options supported by that package. Any supported option passed to mix.svg() will be picked up. The table below lists all options specified by this package, along with their default values.

| option | Type | description | default value | consumed by | |:----------------|:---------------|:--------------------------------------------------------------------|:-----------------------------------------------|:------------------| | srcDir | string | The source directory where the SVG files are located | Elixir.config.assetsPath + "/svg" | gulp | | outputDir | string | The directory where the Symbol sprite and css file will be output. | Elixir.config.publicPath + "/svg" | gulp | | outputFileName | string | The filename of the symbol sprite and css file | "symbols" | gulp-rename | | title | boolean | Whether to add title attributes to the Symbols | false | gulp-svg-symbols | | templates | array | The template files to use for output creation. | SVG-template is the default of gulp-svg-symbols. SCSS template is provided in this package. | gulp-svg-symbols | | className | string | Classname pattern for the SVG Symbols | ".svg-%f" | gulp-svg-symbols | | id | string | ID attribute pattern fo the SVG Symbols | "svg-%f" | gulp-svg-symbols |

Using the stylesheet

The stylesheet (SCSS) also created needs to be manually included in your styles build process. It contains necessary information about the sizes of the svg images. For instance, in your main Sass entry file:

@import "public/svg/symbols.scss";