Show HN: CSS ICON, an icon set crafted by pure CSS

Re:Show HN: CSS ICON, an icon set crafted by pure CSS by ravenstine on Monday October 17, 2016 @10:17AM (#12725193)

I was barely awake when just having this problem last night, but SVG sprites(a bunch of icons in 1 s SVG file) have very limited support in CSS. In Chrome, it doesn't even work to specify a sprite symbol ID as a background URL, for example, even though that would be the most straight forward way to use sprites as icons IMO. CSS icons can have the same effect of having the icons being bundled in a single request while actually working. lol

[ Parent | on HN ]

Re:Show HN: CSS ICON, an icon set crafted by pure CSS by wanda on Monday October 17, 2016 @10:32AM (#12725333)

If you escape the unsafe characters it works everywhere. I've been doing this for ages.

Source: https://codepen.io/yoksel/details/JDqvs/

[ Parent | on HN ]

Re:Show HN: CSS ICON, an icon set crafted by pure CSS by ravenstine on Monday October 17, 2016 @11:32AM (#12725918)

Ah, that's a pretty decent workaround. Though I'm not a fan of putting encoding encoded information into style sheets, I'm not exactly against it either.

Though the method I wanted to use would work if it weren't for the existing icons symbols inside of sprites, which seems to be only supported in Firefox's CSS.

For example: ``` <svg> <symbol id="helloworld">[... a bunch of paths]</symbol> <symbol id="anothersym">[...]</symbol> </svg> ```

``` label:before { background: url('/path/to/my.svg#helloworld') no-repeat; } ```

I could, of course, break the icons out of the symbol tags, as done here: https://css-tricks.com/svg-fragment-identifiers-work/

It's just disappointing that while referencing symbols works just fine with a <use xlink:href> tag, it doesn't work as a CSS url property value. I'm not sure why that would be.

EDIT: Yes, I'm sorry, I know this isn't Stack Overflow. Though I think the above(without symbol tags of course) may be the best alternative to pure-CSS icons if your graphics are more complicated.

[ Parent | on HN ]

Re:Show HN: CSS ICON, an icon set crafted by pure CSS by j4_james on Monday October 17, 2016 @01:16PM (#12727002)

If you're wanting to use fragment identifiers to refer to multiple sprites in a single SVG, that issue was fixed in Chrome in November of last year.[1] I'm not sure if the fix has propagated widely enough to be considered practical for production use, but it's at least a move in the right direction.

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=128055

[ Parent | on HN ]