adamfairhead / webicons

Webicons is a set of resolution-independent social icons for use on your website. They use feature-detected SVG graphics (with PNG fallbacks) to display the icons over their appropriate negatively indented anchor titles.
531 stars 61 forks source link

Image sprites #10

Closed LimeBlast closed 11 years ago

LimeBlast commented 11 years ago

This might be a bad idea, but have you given any thought to the idea of using image sprites for the fall-back images? I realise this might make adding new icons a little bit tougher, but should make for much more optimised sites.

(I would also suggest this for the SVG files, but I don't know enough about SVG to know if anything like this would work).

adamfairhead commented 11 years ago

I've considered it, but I didn't want to force developers to load every icon in the set, when they may perhaps only need one or two of them. My current recommendation for image sprites would be to use Compass' image sprite functionality: http://compass-style.org/reference/compass/utilities/sprites/sprite_img/

Do you think you would make use of an image sprite for the fall-back images, in light of this? I'm open to suggestions :)

LimeBlast commented 11 years ago

The problem we have is that we've got different goals:

While I think what you've done so far is - and your reasons for doing so are - great - I know that it could be improved upon, from an overhead point of view, but that responsibility is, of course, mine.

It won't be quite as easy as the plug-and-play solution you have at the moment, I just need to be a little less lazy - after all, you've done the hard work, all I'd need to do is, as you say, use Compass' image sprite functionality.

There are a couple of things which could be done, however, to offer a plug-and-play solution which is optimised:

  1. Create a web-based generator which allows users to select the icons they'll need, which then automatically provides the sprite'd files and relevant css for only the icons selected.
  2. Go fully compass/sass enabled, taking advantage of the pre-processor functionality available, using code along the lines of:

.facebook { @include fc-webicon('facebook'); }

But, to be honest with it, this is all academic, as I said, what you've provided is already very good, if I want to optimise it further, that's up to me.

adamfairhead commented 11 years ago

Thanks for that, I hear you on this. I've been thinking of making some sass files to go into this set, not unlike how you described. The generator is an interesting idea, and not one I'd considered hitherto.

LimeBlast commented 11 years ago

Although I'm not sure how much use I would me, let me know if you need any help with it :)

adamfairhead commented 11 years ago

Cheers Dan! :+1: