Gulpを使ってsvgスプライトを作っていたが、Gulpのバージョンを4にあげたところ以下のエラーが発生した
ReferenceError: primordials is not defined
原因の一つがremove-svg-properties
で、以下の記事によるとgulp4.0の場合はgraceful-fs@3系は使えないが上のライブラリはアップデートがされていないとのこと
https://hepokon365.hatenablog.com/entry/2019/10/31/022524
remove-svg-properties
はsvg自体についているfillを削除するライブラリで、gulp-svg-spriteと合わせて以下のように使っていた
const svgSprite = require('gulp-svg-sprite') const rst = require('remove-svg-properties').stream
.pipe(rsp.remove({ properties: [rsp.PROPS_FILL] })) .pipe(svgSprite({ svg: { xmlDeclaration: false, doctypeDeclaration: false, dimensionAttributes: false, }, mode: { symbol: { dest: 'dist', prefix: 'icon-%s', sprite:'svg_sprite.svg', bust: false } } }))
ただ、remove-svg-properties
が使えないということで独自に実装をすることにする
gulp-svg-spriteではtransformというオプションでsvgをxmlパースして操作することできるので、そこでfillを削除する
.pipe(svgSprite({ svg: { xmlDeclaration: false, doctypeDeclaration: false, dimensionAttributes: false, transform: [ function(svg) { const DOMParser = require('xmldom').DOMParser, XMLSerializer = require('xmldom').XMLSerializer, doc = new DOMParser().parseFromString(svg, 'text/xml') const tags = doc.getElementsByTagName("*"); for (let index = tags.length - 1; index > -1; index--) { tags[index].removeAttribute("fill") tags[index].removeAttribute("fill-rule") } return new XMLSerializer().serializeToString(doc) } ] }, mode: { symbol: { dest: 'dist', prefix: 'icon-%s', sprite:'svg_sprite.svg', bust: false } } }))