PDA

View Full Version : Ext.ux.TDGi.icons <-- repackaged famfamfam silk icon set!



jay@moduscreate.com
22 Apr 2008, 9:44 AM
/********
N O T E ! !
This class is deprecated. Check out the new and improved one here: http://tdg-i.com/52/tdgiiconmgr-and-iconbrowser-update
**********/

I got tired of having static CSS strings in my intranet apps, so I compiled all images into a flat CSS and Javascript Object for easier consumption:

Click here (http://tdg-i.com/41/famfamfam-icons-packaged-with-css-for-use-with-ext-2x) to download:

Usage:


new Ext.Button({
text : 'click',
iconCls : Ext.ux.TDGi.icons.icn_accept
});



I realize this may be overkill for some of you, but I found it to be easier than tracking iconCls strings.

jay@moduscreate.com
22 Apr 2008, 10:23 AM
Just updated, prepended icn_ to all sub objects, due to IE namespace issues with things like delete. :(

george.antoniadis
22 Apr 2008, 11:29 PM
omg thank you thank you thank you! ^_^

I've been meaning to do something like this for ever! :D

provagino
22 Apr 2008, 11:50 PM
Is better to have a single image and work with placement in css
However good job
thank you

tof
23 Apr 2008, 2:01 AM
Is better to have a single image and work with placement in css
However good job
thank you

I've tried a mozaic of famfamfam icons, added with "silk companion" [1], I've got an image of 635Kb... so it's not saving much time/bandwidth :D

[1] http://damieng.com/creative/icons/silk-companion-1-icons

jay@moduscreate.com
23 Apr 2008, 6:19 AM
Is better to have a single image and work with placement in css
However good job
thank you

eh, you're making the horrible assumption that people want the entire image set.

this method, anyone can chop down the css and js file to what they need!

galdaka
23 Apr 2008, 12:17 PM
Ey thanks!!

Good idea!!

Thanks for sharing!!

provagino
24 Apr 2008, 4:30 AM
All icons in a single gif:147K. (http://home.cein.or.kr/~myicon/smallicon/famfamfam_silk_icons_v013.gif (http://home.cein.or.kr/~myicon/smallicon/famfamfam_silk_icons_v013.gif))

All separate icons: 647K

You can always divide by groups
Is more performance

http://borkweb.com/story/faster-page-loads-with-image-concatenation

jay@moduscreate.com
24 Apr 2008, 4:54 AM
That's irrelevant. Seriously, who downloads all icons? Also, adding X Y coordinates to the CSS Will add overhead there. So i'm not too sure if you're saving that much.

provagino
24 Apr 2008, 5:03 AM
>> Seriously, who downloads all icons?
NO, but I do not want even download separately the 20 - 30 gif that use more

jay@moduscreate.com
24 Apr 2008, 5:17 AM
OK, then don't use this tool. 'nuff said.

jay@moduscreate.com
24 Apr 2008, 5:19 AM
>> Seriously, who downloads all icons?
NO, but I do not want even download separately the 20 - 30 gif that use more

http://tdg-i.com/img/screencasts/2008-04-24_0919.png

mitch_feaster
9 Jul 2009, 2:38 PM
Love it. I use something a little different though and someone might prefer it as well:

Just include one css file (it's ~128kBytes in size, so it's kinda large...) and you're done.

You have to generate the css file yourself with the script attached to this post (*nix only). I've also attached an example output which points at the famfamfam icons on googlecode.


Class names in the generated css file are the name of the image file without the extension and with all underscores converted to hyphens with "image-" prepended to it all.

Here's an example in a toolbar:


//...
tbar: [{
xtype: 'button',
text: 'Custom Button',
iconCls: 'icon-chart-bar-link' //will show chart_bar_link.png as icon on button
}]
//...
Faster to just type "icon-something" instead of "Ext.ux.....something"

jay@moduscreate.com
9 Jul 2009, 3:22 PM
dude, suggesting that it's hard to type that is kind of silly. :)~

if Ext.ux.TDGi.icoMgr.getIcon is too long,

then




var getIcon = Ext.ux.TDGi.icoMgr.getIcon;

new Ext.Window({
height : 100,
width : 100,
iconCls : getIcon('add')
}).show();



that's it. to add another 128K + the weight of the icons with the weight of the framework is too much!

jay@moduscreate.com
9 Jul 2009, 3:27 PM
Btw, i compiled the icon set for customers of Ext jS in Action using a much quicker shellscript ;)

http://tdg-i.com/img/screencasts/2009-07-09_1926.png

jay@moduscreate.com
9 Jul 2009, 3:34 PM
btw, the script handles IE6 detection, so you can use gifs in the application. something you can't do with css alone ;)



for i in `ls icons | grep \.png`do
n=`echo $i | awk -F\. '{print $1}'`
echo ".icon-$n {background-image: url(icons/$i) \!important;}"
done >> icons.css

mitch_feaster
9 Jul 2009, 3:39 PM
Touche on the long name :-)

However, your method weighs in at about 123K by my calculations (i.e. CSS+JS = 85K+38K = 123K). Furthermore, my 128K estimate was with a full url compiled in. I.e. http://famfamfam.googlecode.com/svn/wiki/images/. Using a relative path like in your example (i.e. ../) the CSS file weighs in at about 77K. (But I don't know why you would ever want to do that unless all your code sits in the same directory on the server...Or maybe I've overlooked something.)

Anyways, I'm not here to argue or try to prove that my way's better than yours (because yours is definitely cooler) but I thought I'd just share what I have in case it's a better fit for anyone else due to it's configurability (via the shell script) and/or size.

jay@moduscreate.com
9 Jul 2009, 4:39 PM
sorry dude, wasn't trying to sound stand-off-ish.


just a quick heads up, i initially started with a JSON file compilation ;)

http://tdg-i.com/41/famfamfam-icons-packaged-with-css-for-use-with-ext-2x

cmygeHm
15 Oct 2010, 1:02 AM
Sorry. I don't understand how use Ext.ux.TDGi, how to include in my project.
Prompt to me.
Thank you.