forked from frontendbeast/gulp-svg-spritesheet
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Darren Hall
committed
Nov 3, 2014
1 parent
276988d
commit 88fd4bd
Showing
3 changed files
with
160 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
The MIT License (MIT) | ||
|
||
Copyright (c) Darren Hall <[email protected]> (darrenhall.info) | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in | ||
all copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
THE SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,138 @@ | ||
#gulp-svg-sprite | ||
#gulp-svg-sprite | ||
A [gulp.js](http://gulpjs.com/) plugin to generate an SVG sprite sheet. | ||
|
||
Unlike other node SVG plugins, this does not require Windows users to install Python or Visual Studio C++. | ||
|
||
All output is done using [mustache](http://mustache.github.io/) templates, and as such can be customised to work for Sass, Less, CSS or whatever you like. | ||
|
||
##Install | ||
``` | ||
$ npm install --save-dev iamdarrenhall/gulp-svg-sprite | ||
``` | ||
|
||
##Basic usage | ||
In it's simplest form, all you need to define is the source mustache formatted template file and the destination for the rendered file, plus the path to the sprite relative to the destination. | ||
``` | ||
gulp.task('default', function () { | ||
gulp.src('svgs/*.svg') | ||
.pipe(svgsprite({ | ||
cssPathSvg: 'images/sprite.svg' | ||
templateSrc: 'sass.tpl', | ||
templateDest: 'sass/sprite.scss' | ||
})) | ||
.pipe(gulp.dest('images/sprite.svg')); | ||
}); | ||
``` | ||
|
||
##Complex usage | ||
You can also specify a no-SVG fallback image path, add padding, use relative units and specify positioning layout. You can also chain in other gulp plugins. | ||
``` | ||
gulp.task('default', function () { | ||
gulp.src('svgs/*.svg') | ||
.pipe(svgsprite({ | ||
cssPathNoSvg: 'images/sprite.png' | ||
cssPathSvg: 'images/sprite.svg' | ||
padding: 10, | ||
pixelBase: 16, | ||
positioning: 'diagonal', | ||
templateSrc: 'sass.tpl', | ||
templateDest: 'sass/sprite.scss', | ||
units: 'em' | ||
})) | ||
.pipe(svgmin()) | ||
.pipe(gulp.dest('images/sprite.svg')) | ||
.pipe(svg2png()) | ||
.pipe(gulp.dest('images/sprite.png')); | ||
}); | ||
``` | ||
|
||
##Options | ||
|
||
###cssPathNoSvg | ||
Type: `string` | ||
Default: `<empty>` | ||
|
||
Optional. CSS `background-image` path for the non-SVG fallback image, which will be output in the `templateDest` file. The path should be relative to that final destination file. The mustache template can ignore an empty value. To generate a fallback image you must use a plugin of your choice (e.g. gulp-svg2png) and pipe in the SVG as per the complex example above. | ||
|
||
###cssPathSvg | ||
Type: `string` | ||
Default: `./test.svg` | ||
|
||
CSS `background-image` path which will be used in the `templateDest` file. The path should be relative to that final destination file. | ||
|
||
###demoDest | ||
Type: `string` | ||
Default: `<empty>` | ||
|
||
Optional. A demo file can be created showing all of the SVGs within the spritesheet. A sample is provided in the `test` folder and can be customised however you like. If you do not require a demo file then leave this option empty. | ||
|
||
###demoSrc | ||
Type: `string` | ||
Default: `../demo.tpl` | ||
|
||
Optional. The source mustache template file used to create the `demoDest` file. Only used when `demoDest` is not empty. | ||
|
||
###padding | ||
Type: `integer` | ||
Default: `0` | ||
|
||
Add padding around the individual sprites. Value is pixel based. | ||
|
||
###pixelBase | ||
Type: `integer` | ||
Default: `16` | ||
|
||
Optional. Used if anything other than `px` is specified in `units` to calculate relative units. | ||
|
||
###positioning | ||
Type: `integer` | ||
Default: `vertical` | ||
|
||
Allows icons to be layed out in one of several ways: | ||
|
||
* `vertical` – stacked one on top of another | ||
* `horizontal` – placed side by side | ||
* `diagonal` – cascading from top left to bottom right | ||
* `packed` – like Compass' smart layout option | ||
|
||
###templateDest | ||
Type: `string` | ||
Default: `./sprite.scss` | ||
|
||
The destination of the sprite sheet CSS generated from `templateSrc`. | ||
|
||
###templateSrc | ||
Type: `string` | ||
Default: `./template.tpl` | ||
|
||
A mustache template file used to output the sprite sheet CSS. | ||
|
||
###units | ||
Type: `string` | ||
Default: `px` | ||
|
||
CSS background size and position units of measurement. If a value other than `px` is specified (`em` or `rem`) then pixel values will be converted to relative units using `pixelBase`. | ||
|
||
###x | ||
Type: `integer` | ||
Default: `0` | ||
|
||
Offset the starting X position on the sprite sheet. | ||
|
||
###y | ||
Type: `integer` | ||
Default: `0` | ||
|
||
Offset the starting X position on the sprite sheet. | ||
|
||
##Disclaimer | ||
This is my first gulp plugin, so it might be complete rubbish. It's very alpha right now, and as such may not work. If you spot any bugs, or areas for improvement then feel free to fork yourself and send me a pull request! | ||
|
||
##Thanks | ||
@shakyShane and his [gulp-svg-sprites](https://github.com/shakyShane/gulp-svg-sprites) plugin, which I was using before I need it to run on Windows. | ||
|
||
@FWeinb and his [grunt-svgstore](https://github.com/FWeinb/grunt-svgstore) plugin, which I took inspiration from in using [Cheerio](https://github.com/cheeriojs/cheerio). | ||
|
||
@jakesgordon and his [bin-packing](https://github.com/jakesgordon/bin-packing) algorithm, which is used when `positioning` is set to `packed`. | ||
|
||
[Code Computerlove](http://www.codecomputerlove.com/), the agency for whom I created this plugin, for allowing me to open source it. |