svg-sprite-loader

svg-sprite-loader copied to clipboard

Here is one of SVG files I use

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="list-a" d="M4,14 L8,14 L8,10 L4,10 L4,14 L4,14 Z M4,19 L8,19 L8,15 L4,15 L4,19 L4,19 Z M4,9 L8,9 L8,5 L4,5 L4,9 L4,9 Z M9,14 L21,14 L21,10 L9,10 L9,14 L9,14 Z M9,19 L21,19 L21,15 L9,15 L9,19 L9,19 Z M9,5 L9,9 L21,9 L21,5 L9,5 L9,5 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24"/>
    <mask id="list-b" fill="#fff">
      <use xlink:href="#list-a"/>
    </mask>
    <g fill="#fff" mask="url(#list-b)">
      <rect width="24" height="24"/>
    </g>
  </g>
</svg>

And this is svg in extracted file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-list" width="100%" height="100%">
  
  <g fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24"/>
    
    <g fill="#fff" mask="url(#icon-list_list-b)">
      <rect width="24" height="24"/>
    </g>
  </g>
</svg>

Expected behaviour: width="24" height="24"

Please tell us about your environment:

• Node.js version: 10.10.0
• webpack version: 4.20.2
• svg-sprite-loader version: 4.1.2
• OS type & version: Windows 10

here is my config file:

exports.loadSVG = () => ({
  module: {
    rules: [
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "svg-sprite-loader",
            options: {
              extract: true,
              esModule: false,
              spriteFilename: "sprite-[hash:6].svg"
            }
          }
        ]
      }
    ]
  },
  plugins: [new SpriteLoaderPlugin()]
});

Any news on this?

This problem has already been raised in https://github.com/JetBrains/svg-sprite-loader/issues/304 @kisenka wrote there "But why you need width and height, if you already has viewBox?", I can explain this moment.

viewBox defines the position and dimension of an SVG viewport, not sizes. SVG without sizes goes to the default size of 300px width and 150px height. For many icons other defaults are more appropriate. Yes, sizes can be set using css, but styles may not load. You can also specify the dimensions in html, but an inexperienced developer can forget about it. In any case, having the default width and height into SVG icon is safer. If someone does not need certain attributes, he can always use svgo-loader, but deleting something without the undo option is very inconvenient.

Seems, that svg attributes are trimmed in extract: false mode as well. I agree with @alkorlos - it's really inconvenient. Why don't allow configure preserve list of svgToSymbol? In my case, I have proper width/height and viewBox attributes inside the exported svg from Figma. I don't need to set them manually. I want to set default width/height attributes to the <use>'s parent <svg> element automatically without css. Workaround in custom-runtime-generator-extract-mode example with dimensions extraction from viewBox seems kludgy.