@pixelindustries/laravel-elixir-svg

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";