search

svg-sprite / gulp-svg-sprite

SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
MIT License
647 stars 43 forks source link

Overriding background url in output LESS file #38

Closed shirleyman closed 8 years ago

shirleyman commented 8 years ago

The LESS file currently created links to the the svg file in the same directory. background: url(sprite.svg) no-repeat; which is correct, but I have a subsequent gulp task that will create the combined .css file, which will no longer be in the same folder as the .svg.

What I want is background: url(/special/deployment/path/sprite.svg) no-repeat;

Is there a way to specify that? Thank you.

jkphl commented 8 years ago

Hey @shirleyman,

yes, this should be possible. To fully understand the way svg-sprite uses the output destinations, please read this manual section.

Basically, if you enabled «css» mode, then the mode.<mode>.render.css.dest will be considered as the location of your final CSS file (not the LESS template), otherwise the default output directory mode.<mode>.dest will be taken. Then, mode.<mode>.sprite should specify the sprite name and path relative to the CSS file location (this is what will be used in the stylesheets for referencing the sprite). Finally, make sure that your final CSS gets compiled to the CSS file location as specified above, and you should be all set.

Please let me know if this works for you! Cheers and good luck, Joschi

shirleyman commented 8 years ago

Got it! Thank you.

jkphl commented 8 years ago

:+1:

morena commented 8 years ago

We got round this issue as we could not understand paths, by doing a string-replace on the file to change the final path using gulp-replace npm module

.pipe(replace('source/assets/images', '/assets/images'))

gulp.task('svg-sprite', function(){ gulp.src(paths.svg.source) .pipe(svgSprite(options.svg)) .pipe(replace('source/assets/images', '/assets/images')) .pipe(gulp.dest('.')); });