37.49.72.8: Die Seite wurde neu angelegt: „ https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Icon/Index.html https://usetypo3.com/icon-api.html // Bessere Erklärung mit Beispi…“

2020-02-06T10:57:40Z

Die Seite wurde neu angelegt: „ https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Icon/Index.html https://usetypo3.com/icon-api.html // Bessere Erklärung mit Beispi…“

Neue Seite

https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Icon/Index.html
https://usetypo3.com/icon-api.html // Bessere Erklärung mit Beispielen

Registering an Icon
To use a custom icon in the TYPO3 backend we first have to register it in the class \TYPO3\CMS\Core\Imaging\IconRegistry. We call registerIcon() on an instance of that class to do so. We need to specify (at least) two things. The identifier of the icon and the name of the IconProvider class we want to use.

The identifier is a unique string that identifies exactly one icon. Take whatever name you like. Prefix it with your extension name to be save and prevent naming conflicts.
The IconProvider is a class that generates the corect markup for a specific icon type. The core shipps three providers: BitmapIconProvider, SvgIconProvider and the FontawesomeIconProvider.
If you want to register a simple image file (jpg, gif, png) as an icon you go with the BitmapIconProvider.

Let's look at an example.
<syntaxhighlight lang="php">
$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
$iconRegistry->registerIcon(
'tx-fs-code-snippet',
\TYPO3\CMS\Core\Imaging\IconProvider\BitmapIconProvider::class,
['source' => 'EXT:' . $extKey . '/Resources/Public/Images/code-snippet-icon.png']
);
</syntaxhighlight>
php
This code is best put into the ext_localconf.php. It registers an image (code-snippet-icon.png) with the identifier tx-fs-code-snippet. This identifier can now be used troughout the backend. But before we take a look at the usage let's see how we use the FontawesomeIconProvider:

<syntaxhighlight lang="php">
$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
$iconRegistry->registerIcon(
'proof-of-concept',
\TYPO3\CMS\Core\Imaging\IconProvider\FontawesomeIconProvider::class,
[
'name' => 'spinner',
'spinning' => true
]
);
</syntaxhighlight>

php
If we use the BitmapIconProvider or the SvgIconProvider we have to specify the source of the icon while the FontawesomeIconProvider expects the name of the Font Awesome CSS class we want to use (but without the fa- prefix). All IconProviders however can take the additional option spinning to ... you guessed it ... make the icon spin.

So much for registering an icon. But how do we use it?

Top

Using an Icon
There are many places in the core where we just need the identifier to render an icon. in the TCA for example you specify a new typeicon like this:

<syntaxhighlight lang="php">
$GLOBALS['TCA']['tt_content']['ctrl']['typeicon_classes']['fs_code_snippet'] = 'tx-fs-code-snippet';
</syntaxhighlight>

php
But if we need our icon markup in our PHP code, we can always use an instance of the \TYPO3\CMS\Core\Imaging\IconFactory. By passing our identifer to the method getIcon(), we get an instance of Icon. To modify the markup of the method Icon->render(), we can optionally determine

size (2nd argument) with the constants Icon::SIZE_SMALL (16px), Icon::SIZE_DEFAULT (32px) and Icon::SIZE_LARGE (48px),
an overlay icon (3rd argument) by its identifier and
the state of the icon (4th argument) with the Enumeration constants IconState::STATE_DEFAULT and IconState::STATE_DISABLED. Note that the method expects an instance of the IconState class. So you have to cast the constant to such an instance: IconState::cast(IconState::STATE_DISABLED).

<syntaxhighlight lang="php">
$iconFactory = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconFactory::class);
$icon = $iconFactory->getIcon(
'tx-fs-code-snippet',
\TYPO3\CMS\Core\Imaging\Icon::SIZE_SMALL,
'overlay-identifier',
\TYPO3\CMS\Core\Type\Icon\IconState::cast(\TYPO3\CMS\Core\Type\Icon\IconState::STATE_DISABLED)
);
$iconMarkup = $icon->render();
</syntaxhighlight>

php
There also is a Fluid ViewHelper (\TYPO3\CMS\Core\ViewHelpers\IconViewHelper) that takes all these arguments as well and renders our icon within our Fluid template:
<syntaxhighlight lang="html5>
<html xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers" data-namespace-typo3-fluid="true">
<core:icon identifier="tx-fs-code-snippet" size="small" overlay="overlay-identifier" state="disabled" />
</html>
</syntaxhighlight>
markup
And that is everything you need to know about the Icon-API of TYPO3.

TYPO3 - Icon API - Versionsgeschichte

37.49.72.8: Die Seite wurde neu angelegt: „ https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Icon/Index.html https://usetypo3.com/icon-api.html // Bessere Erklärung mit Beispi…“