Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

cssicon.space

Post reply on HN
Print view View original

41–50 of 69 posts

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

#41

Post by jdauriemma »

phkahler wrote: post #34
oftenwrong wrote: post #31

Earlier quoted context omitted.

You can avoid the separate request by inlining the SVG or using a data URI

I haven't done web stuff in 15+ years. Isn't there the equivalent of a compiler to produce a more static page, which would handle things like putting SVGs inline? Or the ability to create a library (like CSS) where there would only be a single reference to all the reusable components of a page, which may in turn be "compiled" from individual source files?

I think the webpack ecosystem has a lot of plugins for inlining.

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

#42

Post by wentin »

MOARDONGZPLZ wrote: post #33

Wow! I'm not really a front end person who works with this kind of stuff, so I don't know the real use case of this versus something else. But: I went through a lot of the simpler ones on the codepen (minus, plus, menu, etc.) and learned some awesome techniques that I didn't know, then recreated them from scratch and was able to create some of the more complicated things. tbh I probably learned more css in the last h…

this made my day! like what I said in the video, I struggled finding use case of it for other people, and decided to spend more time than what I spent on crafting these icons to make this an educational web app with angularjs. I am very glad it is doing what I want it to do. I recorded these tutorials long time ago and never posted it anywhere, i think maybe this will interest you https://www.youtube.com/watch?v=TNCngP8w284 https://www.youtube.com/watch?v=go3P1Op9tF8 https://www.youtube.com/watch?v=EuO21HanS6k

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

#43

Post by j4_james »

myfonj wrote: post #15

Really nice execution! I remember seeing similar projects [1][2] in the past and pondered usage of the `currentColor`. Btw, there are several occurrences of white components [4]; they are necessary for "breaking" lines, but surprisingly there are very few of them and overall do't break much [3]. [1] http://cikonss.zzapdeveloped.it/ [2] http://one-div.com/ (warning, hugely ad infested currently) [3] console: document.…

I remember seeing something like this before too. This is the one I was thinking of. http://nicolasgallagher.com/pure-css-gui-icons/

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

#44

Post by wentin »

majewsky wrote: post #29

This is blocked by my corporate proxy. Maybe because of the ".space" TLD?

this sucks, it is on github gh-pages, should be fine on the hosting side, probably the domain name. http://wentin.github.io/cssicon maybe try this but probably won't work because it redirect to cssicon.space immediately.

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

#45

Post by ysavir »

wentin wrote: post #18
amelius wrote: post #7

Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

css icon has less code, the code is more editable and managable, argumentably better performance (because i haven't tested it) in the intro youtube video I said more about that. But to be honest, I just had a lot of fun dealing with the constraints that comes with css and loved the creating process, I spent a few weekends keeping designing and coding those tiny icons and skipped a lot of sleeping and still had fun.

SVGs also have less chance of inhering unwanted code, typically. But this can vary with your CSS writing styles.

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

#46

Post by hughes »

brudgers wrote: post #35

My concern is the burden this seems to place on hardware. By which I mean that loading the page into my browser (Firefox) and letting it sit for a minute spun up my laptop fan to an audible level and warmed one of my quadriceps.

Something on that page is definitely gobbling up CPU. I barely get 10fps when scrolling.

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

#47

Post by wentin »

hughes wrote: post #46
brudgers wrote: post #35

My concern is the burden this seems to place on hardware. By which I mean that loading the page into my browser (Firefox) and letting it sit for a minute spun up my laptop fan to an audible level and warmed one of my quadriceps.

Something on that page is definitely gobbling up CPU. I barely get 10fps when scrolling.

this sucks! I am trying to figure out why, could be the angular app's performance?

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

#49

Post by wentin »

baby wrote: post #48

Why not the character "+" instead of tracing two vertical/horizontal bars?

there are design cases like, I want to make everything minimalistic, so everything should be consistent of 1px stroke weight, then i need to have a special + sign drawn :) Designers are this this. like developer has to indent 2 spaces instead of 4 or 8. similar thing

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

#50

Post by nthcolumn »

wentin wrote: post #37
pcwalton wrote: post #23

Earlier quoted context omitted.

The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engines. Most 2D vector graphics backends go to a lot of effort to cull invisible regions. CSS icons may be slightly slower than an optimized SVG due to the overhead of restyling and layout. Also, the browser-side painting may be a bit slower for CSS icons, becaus…

this is awesome analyze, thanks!

What about caching - is that an advantage over inline SVG? I imagine the css would compress better too? I'd like to see animated ones. Holy geocities! I have no clue how it works. Amazing.
Post reply on HN