Add group tag to enable the svg <use> tag

[leveled23]

Currently it's not possible to dynamically import the icons and color them with the current text color. Simply adding a group tag with an id and fill='currentColor' attribute would enable this. For example:

<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><g id="abacus" fill="currentColor"><path d="M21,2a1,1,0,0,0-1,1V6H16V5a1,1,0,0,0-2,0V6H12V5a1,1,0,0,0-2,0V6H8V5A1,1,0,0,0,6,5V6H4V3A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V3A1,1,0,0,0,21,2ZM20,19a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V16H6v1a1,1,0,0,0,2,0V16h2v1a1,1,0,0,0,2,0V16h4v1a1,1,0,0,0,2,0V16h2Zm0-5H18V13a1,1,0,0,0-2,0v1H12V13a1,1,0,0,0-2,0v1H8V13a1,1,0,0,0-2,0v1H4V8H6V9A1,1,0,0,0,8,9V8h2V9a1,1,0,0,0,2,0V8h2V9a1,1,0,0,0,2,0V8h4Z"/></g></svg>

[harmendv]

I like the idea of the <g> tag with an ID because this allows us to use the <use> tag for individual .svg files. This removes the overhead of loading the entire sprite when all you need is 2 icons.

On the other hand, the fill attribute isn't necessary because you can already manipulate the fill via CSS. For example: svg { fill: red } works like a charm.