Not so long ago I have been working with SVG sprites, and in general, everything was fine. Task in gulp was started, svg the sprite and scss a file with values of icons was created. All this was added to the markup and the color and size values comfortably changed through css.
All icons were one-color.
Recently began to come across icons with multiple colors. For example:
<symbol viewBox="0 0 43.922 41.992" id="microsoft-logo"><path d="M20.874 19.953H0V0h20.874v19.953zM43.922 19.953H23.049V0h20.873v19.953zM20.873 41.992H0V22.04h20.873v19.952zM43.922 41.992H23.049V22.04h20.873v19.952z"/></symbol> Of course, the npm package removes all fill and merges the entire path into one. And, of course, the icon becomes one-color.
<symbol viewBox="0 0 43.922 41.992" id="microsoft-logo"><path d="M20.874 19.953H0V0h20.874v19.953zM43.922 19.953H23.049V0h20.873v19.953zM20.873 41.992H0V22.04h20.873v19.952zM43.922 41.992H23.049V22.04h20.873v19.952z"/></symbol> What are the ways to solve this problem? Of course, you can then insert the top line with all the colors of the handles into the sprite, but this is no longer automation. I am sure that such a problem has already occurred. I will be glad to help)
PS I use svgmin, svgsprite and cheerio (it removes the extra fields).
