Repository navigation
Add group tag to enable the svg <use> tag #137
Description
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>
Activity
harmendv commentedon Jul 19, 2021
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
fillattribute isn't necessary because you can already manipulate the fill via CSS. For example:svg { fill: red }works like a charm.