https://github.com/jostinsu/postcss-svg-sprite
A PostCss plugin to construct SVG sprite
https://github.com/jostinsu/postcss-svg-sprite
gulp postcss postcss-plugin svg svg-sprites
Last synced: 3 months ago
JSON representation
A PostCss plugin to construct SVG sprite
- Host: GitHub
- URL: https://github.com/jostinsu/postcss-svg-sprite
- Owner: jostinsu
- License: mit
- Created: 2018-03-12T02:26:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-24T14:21:11.000Z (about 8 years ago)
- Last Synced: 2025-09-17T22:38:26.063Z (9 months ago)
- Topics: gulp, postcss, postcss-plugin, svg, svg-sprites
- Language: JavaScript
- Size: 126 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Svg Sprite [![Build Status][ci-img]][ci]
[PostCSS] plugin to construct SVG sprite.
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/jostinsu/postcss-svg-sprite.svg
[ci]: https://travis-ci.org/jostinsu/postcss-svg-sprite
## Example
Input
```css
@svgsprite common;
```
Output
```css
.demo_common {
background: url("../sprite/common.svg") left top no-repeat;
display: inline-block;
overflow: hidden;
font-size: 0;
line-height: 0;
vertical-align: top;
}
.demo_common_AddMemberSmallGray {
width: 14px;
height: 14px;
background-position: -74px -26px;
}
.demo_common_ArrowGrayDown6h {
width: 10px;
height: 6px;
background-position: -44px -30px;
}
```
## Usage
Work with Gulp
```js
let gulp = require('gulp'),
postcss = require('gulp-postcss'),
svgSprite = require('./index.js');
gulp.task('sprite', function () {
return gulp.src('./example/src/css/*.css')
.pipe(postcss([svgSprite({
imagePath: './example/src/svg',
spriteOutput: './example/dist/sprite',
styleOutput: './example/dist/css',
nameSpace: 'demo_',
})]))
.pipe(gulp.dest('./example/dist/css'));
});
```
## Options
#### imagePath:
> Relative path to the folder that svgs are stored.
#### styleOutput:
> Relative path to the folder that will keep your output stylesheet(s).
#### spriteOutput:
> Relative path to the folder that will keep your output sprite(s).
#### nameSpace:
> NameSpace(Prefix) of the class name of each svg.
#### cssSeparator:
> Separator between css selector's 'block' and 'element'. In this plugin. 'block' is equal to file dirname or dynamic one, 'element' is the base name of file.
See [PostCSS] docs for examples for your environment.