UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Gulp】gulp4.0ではremove-svg-propertiesが使えない

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-propertiessvg自体についている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というオプションでsvgxmlパースして操作することできるので、そこで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
        }
      } }))