mrsum / webpack-svgstore-plugin

Simple svg-sprite creating with webpack
https://www.npmjs.com/package/webpack-svgstore-plugin
200 stars 92 forks source link

svgo integration not working well #108

Closed kazazor closed 8 years ago

kazazor commented 8 years ago

Hi, I'm having a problem with the plugin in terms of the svgoOptions integration. I'm using version 3.0.3 of the plugin.

This is the configuration I've for the plugin:

{
  svg: {
    style: 'display: none;'
  },
  // All the svgo options are taken from here: https://github.com/svg/svgo#what-it-can-do
  svgoOptions: {
    plugins: [
     { removeXMLNS: true } // Changed from default of `false`
    ]
  }
}

My end result svg file looks like this:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol viewBox="0 0 18 18" id="icon-delete"><g transform="translate(2 1)" fill="currentColor" fill-rule="evenodd"><path d="M4 2h5V1H4v1zm9 0h-3V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v1H0v1h1.072L1 14c0 1 1 2 2 2h7c1 0 2-1 2-2l-.07-11H13V2zm-2 13H2V3h9v12z"></path><rect x="6" y="5" width="1" height="8" rx=".5"></rect></g></symbol><symbol viewBox="0 0 18 18" id="icon-duplicate"><g fill="currentColor" fill-rule="evenodd"><path d="M5 3V2c0-.552.456-1 1.002-1h9.994c.554 0 1.003.456 1.003 1.002v9.996a1 1 0 0 1-1 1.002h-1v-1h1V2h-10v1"></path><path d="M3 14.998c0-.003 9.997.002 9.997.002-.002 0 .003-9.998.003-9.998C13 5.005 3.003 5 3.003 5L3 14.998zM3.003 4h9.994C13.551 4 14 4.456 14 5.002v9.996c0 .553-.456 1.002-1.003 1.002H3.003A1.007 1.007 0 0 1 2 14.998V5.002C2 4.45 2.456 4 3.003 4z"></path></g></symbol><symbol viewBox="0 0 18 18" id="icon-edit"><g fill="currentColor" fill-rule="evenodd"><path d="M3 13v3l-1-1h3l-.707.293 11-11v1.414l-3-3h1.414l-11 11L3 13zm-1 0L13 2l3 3L5 16H2v-3z"></path><path d="M11 4.707L11.707 4l2.12 2.12-.706.708z"></path></g></symbol><symbol viewBox="0 0 16 16" id="icon-instances"><g fill="currentColor" fill-rule="evenodd"><path d="M12.985 12h1.007C14 12 14 2.002 14 2.002 14 2.005 4.002 2 4.002 2L4 2.99H3v-.994C3 1.446 3.456 1 4.002 1h9.996C14.55 1 15 1.456 15 2.002v9.996C15 12.55 14.553 13 13.992 13h-1.007v-1z"></path><path d="M13 8v5.997C13 14.55 12.544 15 11.998 15H2.002A1.007 1.007 0 0 1 1 13.998V4.002C1 3.45 1.453 3 1.997 3H9v1H2v9.998L12 14V8"></path><path d="M6.545 11.41l.41.59.432-.577L12.5 4.57 11.668 4l-5.113 6.854.84.013L5.352 7.93l-.85.543z"></path></g></symbol><symbol viewBox="0 0 16 16" id="icon-items"><g fill="currentColor" fill-rule="evenodd"><path d="M1 13.993c0 .005 11.993.007 11.993.007C12.997 14 13 1.007 13 1.007 13 1.002 1.007 1 1.007 1 1.003 1 1 13.993 1 13.993zM1.007 0h11.986C13.55 0 14 .45 14 1.007v12.986C14 14.55 13.55 15 12.993 15H1.007C.45 15 0 14.55 0 13.993V1.007C0 .45.45 0 1.007 0z"></path><path d="M4 4h6v1H4zm0 3h6v1H4zm0 3h6v1H4z"></path></g></symbol><symbol viewBox="0 0 20 32" id="icon-modal_arrow_right"><path d="M13.779 16.5L2.45 5.56c-.6-.585-.6-1.535 0-2.12a1.563 1.563 0 0 1 2.173 0L18 16.5 4.623 29.56c-.6.586-1.573.586-2.173 0-.6-.585-.6-1.535 0-2.12L13.779 16.5z" fill="#FFF" fill-rule="evenodd"></path></symbol><symbol viewBox="0 0 20 20" id="icon-modal_close"><path d="M10 8.586L2.224.81A1 1 0 1 0 .81 2.224L8.586 10 .81 17.776a1 1 0 1 0 1.414 1.414L10 11.414l7.776 7.776a1 1 0 1 0 1.414-1.414L11.414 10l7.776-7.776A1 1 0 1 0 17.776.81L10 8.586z" fill="#FFF" fill-rule="evenodd"></path></symbol><symbol viewBox="0 0 16 4" id="icon-more"><g transform="rotate(90 8 8)" fill="currentColor" fill-rule="evenodd"><circle cx="2" cy="2" r="2"></circle><path d="M2 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path><circle cx="2" cy="14" r="2"></circle></g></symbol></svg>

As you can see, I still have xmlns attributes in my generated symbols.. I do know that the plugin is working since my app is running + you can see int he result svg that we have the icon- prefix in the ids..

Any reason why is that?

P.S: My actual configuration I have has more plugins.. But even the simple configuration with only removeXMLNS isn't working for me.. Here is the full configuration I have:

{
  svg: {
    style: 'display: none;'
  },
  // All the svgo options are taken from here: https://github.com/svg/svgo#what-it-can-do
  svgoOptions: {
    plugins: [
      { cleanupAttrs: true },
      { removeDoctype: true },
      { removeXMLProcInst: true },
      { removeComments: true },
      { removeMetadata: true },
      { removeTitle: true }, // Changed from default of `false`
      { removeDesc: true },
      { removeUselessDefs: true },
      { removeXMLNS: true }, // Changed from default of `false`
      { removeEditorsNSData: true },
      { removeEmptyAttrs: true },
      { removeHiddenElems: true },
      { removeEmptyText: true },
      { removeEmptyContainers: true },
      { removeViewBox: false },
      { cleanUpEnableBackground: true },
      { minifyStyles: true },
      { convertStyleToAttrs: true },
      { convertColors: true },
      { convertPathData: true },
      { convertTransform: true },
      { removeUnknownsAndDefaults: true },
      { removeNonInheritableGroupAttrs: true },
      { removeUselessStrokeAndFill: true },
      { removeUnusedNS: true },
      { cleanupIDs: true },
      { cleanupNumericValues: true },
      { cleanupListOfValues: true },
      { moveElemsAttrsToGroup: true },
      { moveGroupAttrsToElems: true },
      { removeRasterImages: false },
      { mergePaths: true },
      { convertShapeToPath: true },
      { sortAttrs: false },
      { transformsWithOnePath: false },
      { removeDimensions: true }, // Changed from default of `false`
      { removeAttrs: false },
      { removeElementsByAttr: false },
      { addClassesToSVGElement: false },
      { addAttributesToSVGElement: false },
      { removeStyleElement: false }
    ]
  }
}
kazazor commented 8 years ago

Oops.. My bad here, I was looking at it wrong :)

mrsum commented 8 years ago

@kazazor Glad to hear that ^^