Feature request: sprites script to handle multi coloured, multi layered svgs

Its been around for a while, but recent trends requires more fancy SVGs and icons supporting multi colours and multi layers.

Our current sprite script seems to require a specific format for svgs, thus, not allowing fancy svgs in sprites.

Helpful link: https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Multi coloured multi layered svg icon for reference:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
    <title>Illustration / Career progression</title>
    <desc>Created with Sketch.</desc>
    <g id="Illustration-/-Career-progression" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polyline id="Stroke-1" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" points="5 42.047619 5 31.5714286 17.2104762 31.5714286 17.2104762 42.047619 18.8942857 42.047619 18.8942857 17.2857143 31.1057143 17.2857143 31.1057143 42.047619 32.7895238 42.047619 32.7895238 3 45 3 45 42.047619"></polyline>
        <polygon id="Fill-3" fill-opacity="0.2" fill="#0967B1" points="43 44.047619 43 5 30.7895238 5 30.7895238 44.047619 29.1057143 44.047619 29.1057143 19.2857143 16.8942857 19.2857143 16.8942857 44.047619 15.2104762 44.047619 15.2104762 33.5714286 3 33.5714286 3 44.047619"></polygon>
    </g>
</svg>```

Ok so short update -- appears the issue is that our sprite.js script removes all fills, strokes and transforms. If you have 1-dimensional 1-color icons thats fine, but if you need more fancy svgs, this won't do.

I guess this is more a question how we want it to behave, but if anyone has issues similar to mine in the short term, removing the following will do the trick, if you need more control over how the SVGs look and behave.

novicell-frontend/config/sprites/sprite.js

Lines 32 to 34 in 92e1753

    
           removeAttrs: { 
        
               attrs: '(fill.*|stroke.*|transform.*)' 
        
           }

Hey @hesselberg, i created a pull request #303 , @Dan9boi will you check and merge, if you agree with the decision?

@Bjornnyborg it really depends on what kind of icons/svgs we use in the different projects. I think its best if we don't do it, but at the same time, if its a simple project with 1-dimensional icons, its handy having them being "cleaned"

@hesselberg Even when we have simple icons, we often need to do something like extracting strokes and merging layers. I only think this feature makes sense if we could completely avoid manual handling of the files. So let's remove it for now. :)