Sunday, August 11, 2013

New open source tool: Fyles

Fyles is a tool that will gather all the icons for all the file types that are on a system. It then generates a sprite sheet and css for all of those extensions. Fyles only references unique icons, so if there are file types that share the same icon, it will only be in the sprite once. The exception to this is the “default” icon, to ensure that the default icon exists in the sprite, it may exist more than once.

Here is a sample of how the sprite is laid out:

fyles-sample

And here is a small block of what the css looks like:

And here is how you would include an icon on your page:

New open source tool: Fyles

Fyles is a tool that will gather all the icons for all the file types that are on a system. It then generates a sprite sheet and css for all of those extensions. Fyles only references unique icons, so if there are file types that share the same icon, it will only be in the sprite once. The exception to this is the “default” icon, to ensure that the default icon exists in the sprite, it may exist more than once.

Here is a sample of how the sprite is laid out:

fyles-sample

And here is a small block of what the css looks like:

And here is how you would include an icon on your page: