1.0.6 • Published 6 years ago
postcss-svg-sprite v1.0.6
PostCSS Svg Sprite
PostCSS plugin to construct SVG sprite.
Example
Input
@svgsprite common;
Output
.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
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.
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
1.0.0-beta
6 years ago
0.0.1-beta
6 years ago