There is a lot to like about Gaddafi Rusli’s ICONSVG.
- It provides inline
<svg>
, which is the most generically useful way to deliver them, and probably how they should be used anyway. Each icon is a tiny amount of SVG and I’d bet they were all hand-golfed. - They are all stroke-based, so they can be beefed up or slimmed down as needed.
- The
stroke-linecap
andstroke-linejoin
properties can be adjusted, which presents an opportunity to make their edges sharper or more rounded. I often find icons that are close to what I want, but the weight isn’t right or the edges are either too sharp or too round. This quick and easy configuration is awesome.
Nice icon set.
A question:
If you’re
<use>
ing SVGs that apply their main color withstroke
rather thanfill
how do we alter the color of the icon with CSS without also applying the stroke to the box around it?Apologies. I’ve just realised I messed things up by leaving the usual empty containing box around the icon in (the one you see in the likes of material icons
<path d="M0 0h24v24H0z" fill="none"/>
) rather than using just what iconsvg.xyz provides. Removing that fixed the issue.