Closed ganlanyuan closed 7 years ago
@ganlanyuan Why you need this attribute? It's much better to use CSS!
.icons { fill: #fff; }
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!
@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.
@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?
@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?
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)
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.
Hmm, I get the same error even I updated the gulp.dest
.
Can you give the exact code that you run? You can zip it or create a project on github
After I delete the node_modules/
folder and reinstall everything, the error disappeared.
Thanks a lot for your help!
@ganlanyuan cool that you figured this!
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.
Hey, Original svg code:
Sprite svg:
Gulp option:
The
fill
attribute is removed. Is there a way to prevent this happen?