How to generate a sprite without symbol tags and keep using svg tags

[xsintill]

Do you want to request a feature, report a bug or ask a question? ask a question

What is the current behavior?

What is the expected behavior?

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.

The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code).

It you don't want to create a repository - create a gist with multiple files

If this is a feature request, what is motivation or use case for changing the behavior?

Please tell us about your environment: We are migrating from gulp to webpack. In our SPA we use svg icons from a sprite for use with angularjs material. Our SPA is used in different browsers like the latest chrome, firefox, edge and IE11(not lower). Under our system with gulp sprite generation could be read without any problems. The default sprite generation with svg-sprite-loader differs from our sprite generation. In IE11 the icons are not read anymore from the sprite. Our current svg-sprite-loader configuration generates a sprite in which the svg's become symbols. If i change those symbol tags manually afterwards into svg tags IE11 loads those icons again from the sprite.

Is there a configuration setting to generate the svg's as svg's instead of symbols? If not are there any other tips to do this?

our working sprite structure looks like this and we would like svg-sprite-loader to generate output like this:

<svg xmlns....>
  <defs>
    <svg viewbox ....>
    </svg>
    <svg viewbox ....>
    </svg>
     ...
  </defs>
</svg>

svg-sprite-loader currently generates like this:

<svg xmlns....>
  <defs>
    <svg viewbox ....>
    </svg>
    <svg viewbox ....>
    </svg>
     ...
  </defs>
</svg>

webpack config:

module: {
    rule: 
         [{
                test: /.*\\images\\.*\.svg$/, 
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: true,
                            spriteFilename: './assets/images-sprite/defs/svg/sprite.defs.svg'
                        }
                    },                  
                    'svg-transform-loader',
                    'svgo-loader'
                ]
            }]
}
...
 plugins: [
         new SpriteLoaderPlugin({
            plainSprite: true
        }),
    ],

• Node.js version: v10.9.0
• webpack version: 4.20.2
• svg-sprite-loader version: 3.9.2
• OS type & version: mas windows 10 pro 10.0.17134

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)