TYPO3 Core

SPRITE ICON API

The sprite icons are a completely different approach than using single file images. In order to get a
icon you don't need to know anything about a file or whatever. The only thing you need to know are the
css classes used. This api even helps you with that by only needing a single string name for an icon.
You should always look up this "iconName" in the Skinning Manual.

Example: display an icon for creating a new document/page content element
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new');
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new "> </span>

Common Options

If you want to change additional options you can provide them as an config array. Some options are
- 'title' (string: defaults to '') define an title for the icon [if the icon is wrapped by a link for functionality the link should get the title]
- 'class' (string: defaults to '') additional css classes to add
- 'row' (array: no default) data row; not added as attribute
- [...] more Options are in the Advanced Section

Example: new Record icon with a title tag
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', 'Create new Record');
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', array('titel' => 'Create new Record') );
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new" title="Create new Record"> </span>
Note: The title is a special case and can also be provided as string for the second parameter

Example: new Record icon with an additional css class
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', array('class' => 'center') );
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new center"> </span>

Example: new Record icon with an additional css class and title tag
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', array('class' => 'center', 'titel' => 'Create new Record') );
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new center" title="Create new Record"> </span>

for further documentation please see the source code

patching instructions
This patch consists of multiple files:
spriteIconAPI.patch - contains the logic that should be submitted

spriteReplace.patch - replaces most of the skinImg calls in the core; this is for showing how it the API will work and that you see it working; there will be separate RFC for replacing all skinImg calls once the API has been included.

sprites_css_t3skin.zip - contains the sprites and css used. This needs the patch #21900 to be applied. Extract it directly in your typo3_src folder; This file will replace "typo3/sysext/t3skin/ext_tables.php"; add sprite images to "typo3/sysext/t3skin/images/sprites/"; add sprite css to "typo3/sysext/t3skin/stylesheets/sprites/". Where the sprites css and sprite images are placed and how they are generated is not part of this RFC.

Note: In this example there are a few missing icons, mainly for the different file extension. The code is still working, but the css and sprites have to be added. Also the Skinning manual will have to adopt these.

Note: this code is also on github so you can explore it and get a full version with all patches applied if you want to.
http://github.com/daKmoR/typo3v4core/tree/spriteExample

This is part of the work done by Team3/Team4 @ T3UXW09 and will be continued by some further patches, to e.g. replacing all skinImg calls
(issue imported from #M13379)