w0rm/gulp-svgstore

Please don't remove the fill attribute in svg

ganlanyuan opened this issue · 12 comments

ganlanyuan commented

Hey,
Original svg code:

<svg viewBox="0 0 806 806" xmlns="http://www.w3.org/2000/svg" fill="#fff">

Sprite svg:

<symbol id="us" viewBox="0 0 806 806">

Gulp option:

.pipe(svgstore({ inlineSvg: true }))

The fill attribute is removed. Is there a way to prevent this happen?

Deleted user commented

@ganlanyuan Why you need this attribute? It's much better to use CSS!
.icons { fill: #fff; }

ganlanyuan commented

I'm using some icons which I downloaded previously.
Off course I can add the background-color manually, but consider If I have 100 icons with different fill colors, how can I possibly manage them?
I expect gulp-svgstore just combine them together, don't remove the icons' original attributes.
Thanks anyway for the great plugin!

w0rm commented

@ganlanyuan you can always pipe through gulp-cheerio and automate it.

e.g. take the fill from <svg> and create a top level <g> element with this fill, and move all nodes inside it.

ganlanyuan commented

@w0rm Thanks
I moved the fill attribute from the <svg> to a new created top level <g> tag and then I run the gulp sprite command, got this error:

$symbol.append($svg.contents())
                        ^

TypeError: $svg.contents is not a function
    at Transform.transform [as _transform] (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/gulp-svgstore/index.js:112:25)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:307:12)
    at writeOrBuffer (_stream_writable.js:293:5)
    at Transform.Writable.write (_stream_writable.js:220:11)
    at write (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:86:13)

Is this related to the modification of the svg file?

w0rm commented

@ganlanyuan sorry but this information is not enough to figure out the problem. Can you provide the svg file that does not work or a test project that reproduces the issue?

ganlanyuan commented

Package.json

"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-cheerio": "^0.6.2",
  "gulp-rename": "^1.2.2",
  "gulp-svgstore": "^6.1.0"
}

gulpfile.js

var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var rename = require('gulp-rename');

gulp.task('sprites', function () {
  return gulp.src(['svg-min/fill/eye-fill.svg'])
    .pipe(svgstore({ inlineSvg: true }))
    .pipe(rename('sprites.svg'))
    .pipe(gulp.dest(''));
});

eye-fill.svg

<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><title>eye-fill</title><path d="M24 9C10 9 .5 24 .5 24S10 39 24 39s23.5-15 23.5-15S38 9 24 9zm0 23a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" fill="currentColor" fill-rule="evenodd"></path></svg>

And I got this error

/Users/linwilliam/Documents/Projects/develop/icons/node_modules/gulp-svgstore/index.js:112
    $symbol.append($svg.contents())
                        ^

TypeError: $svg.contents is not a function
    at Transform.transform [as _transform] (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/gulp-svgstore/index.js:112:25)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:307:12)
    at writeOrBuffer (_stream_writable.js:293:5)
    at Transform.Writable.write (_stream_writable.js:220:11)
    at write (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/Users/linwilliam/Documents/Projects/develop/icons/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:86:13)
w0rm commented

This works for me:

var gulp = require('gulp');
var svgstore = require('gulp-svgstore');

gulp.task('default', function () {
  return gulp.src('svg-min/fill/eye-fill.svg')
    .pipe(svgstore({ inlineSvg: true }))
    .pipe(gulp.dest('.'));
});

your example was writing to the same directory as the source files.

ganlanyuan commented

Hmm, I get the same error even I updated the gulp.dest.

w0rm commented

Can you give the exact code that you run? You can zip it or create a project on github

ganlanyuan commented

After I delete the node_modules/ folder and reinstall everything, the error disappeared.
Thanks a lot for your help!

  • 👍1
w0rm commented

@ganlanyuan cool that you figured this!

thesayyn commented

Im facing with this issue also. it's useless, there should be option for remove it or not. i have bunch of svg icon how i can recolor all of them.

  • 👍3