Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

> css icon has less code

this is just not true. using svg you can have a single string describe an arbitrarily complex path.

> the code is more editable

also not true. they are both just text...

> and managable

how so? in svg you can group things, easily shuffle things around, save them in separate files and point to them.

> argumentably better performance (because i haven't tested it)

what does that even mean? loading time? rendering time? memory?

Congratulations, there is some pretty cool wizardry going on in there, and it's undoubtedly fun, I just find your rationale for it completely made up. You still got my upvote though, just please don't say such unsubstantiated silly things.

edit:formatting



> css icon has less code

this is just not true. using svg you can have a single string describe an arbitrarily complex path.

reply: unless you count code by lines, but that single line of string for paths feels really really long and not readable. see below

> the code is more editable

<svg id="beard" data-name="beard 1" xmlns="http://www.w3.org/2000/svg" width="14.096" height="4.063" viewBox="0 0 14.096 4.063"><title>Untitled-1</title><path d="M10.529,0.563a2.245,2.245,0,0,0-2.972,0,1.806,1.806,0,0,0,0,2.716c1.8,1.643,4.343.514,6.539-1.63C13.461,2.269,12.136,2.032,10.529.563Z" fill="#fff"/><path d="M3.567,0.563a2.245,2.245,0,0,1,2.972,0,1.806,1.806,0,0,1,0,2.716C4.741,4.922,2.2,3.793,0,1.649,0.635,2.269,1.959,2.032,3.567.563Z" fill="#fff"/></svg> vs. in css http://cssicon.space/#/icon/mustache-solid

to change its shape you need to use illustrator for SVG vs. in css just some property change. Yes they are just text, but are you really smart enough to edit the above SVG code by hand?

> and managable

managable as you can have clean html, all you need is a div, vs. svg you have to insert the whole chunk of svg code in your html.(Using <img/> won't give you flexibility, svg has to be inline) you can have package tool to insert svg programmatically but when you just prototyping, not gonna do that whole process to just get some icon showing up. CSS ICON is grab and go icons.

> arguably better performance (because i haven't tested it)

It is not true rendering time wise, as someone else analyzed CSS need more rendering time. But you have less HTTP request comparing to icon fonts or external SVG files. Download time is faster


like I said in the video, I admit it is not a replacement technique of SVG for icons, but it does have its niche use cases. When I prototype, or I need some simple icon that I want to animate when hover, CSS is easier. You can see a lot of hamburger icon out there are done by css. This is a reference so that someone else don't need to redraw the hambuger icon in css again and again.

Beyond that I have positioned it as an CSS learning tool. I spent more time making the web app than doing the icons, with angular.js, so that one can click on any icon and inspect and learn these css tricks within 10 mins or so. The easiest way to learn any programming language is to do a hands-on project, and I find cssicon is bite-sized project that give the learner some learning satisfaction within the ideal short time span. I hope this helps someone




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: