# @pixelindustries/laravel-elixir-svg

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

Latest version **0.1.6** (published 2017-06-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @pixelindustries/laravel-elixir-svg
pnpm add @pixelindustries/laravel-elixir-svg
yarn add @pixelindustries/laravel-elixir-svg
bun add @pixelindustries/laravel-elixir-svg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2017-06-22 |
| First published | 2017-06-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | pixelindustries |
| Keywords | elixir, gulp, laravel, svg |

## Links

- npm: https://www.npmjs.com/package/@pixelindustries/laravel-elixir-svg
- npm.io page: https://npm.io/package/@pixelindustries/laravel-elixir-svg

## Dependencies (6)

- [gulp](https://npm.io/package/gulp.md) ^3.8.8
- [path](https://npm.io/package/path.md) ^0.12.7
- [gulp-shell](https://npm.io/package/gulp-shell.md) ^0.5.1
- [gulp-rename](https://npm.io/package/gulp-rename.md) ^1.2.0
- [laravel-elixir](https://npm.io/package/laravel-elixir.md) ^6.0.0-15
- [gulp-svg-symbols](https://npm.io/package/gulp-svg-symbols.md) ^0.3.1

## Recent versions

- 0.1.6 (latest) — 2017-06-22
- 0.1.5 — 2017-06-22
- 0.1.4 — 2017-06-21
- 0.1.3 — 2017-06-21
- 0.1.2 — 2017-06-21
- 0.1.1 — 2017-06-21

## README

[![npm version](https://badge.fury.io/js/%40pixelindustries%2Flaravel-elixir-svg.svg)](https://badge.fury.io/js/%40pixelindustries%2Flaravel-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:


```javascript
// 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](https://github.com/Hiswe/gulp-svg-symbols/blob/master/README.md#id-and-classname) 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](https://www.npmjs.com/package/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](https://www.npmjs.com/package/gulp-svg-symbols) |
| className      | string        | Classname pattern for the SVG Symbols                              | `".svg-%f"`                                   | [gulp-svg-symbols](https://www.npmjs.com/package/gulp-svg-symbols) |
| id             | string        | ID attribute pattern fo the SVG Symbols                            | `"svg-%f"`                                    | [gulp-svg-symbols](https://www.npmjs.com/package/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:

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

---
_Source: https://npm.io/package/@pixelindustries/laravel-elixir-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._