TYPO3 Icons: So nutzen Sie die Icon API effizient

TYPO3 gestattet es An­wen­de­rin­nen und Anwendern, auf eine Vielzahl von Icons zu­rück­zu­grei­fen. Deren In­te­gra­ti­on und Ver­wal­tung wird über die TYPO3 Icon API rea­li­siert. Auch eigene TYPO3 Icons lassen sich pro­blem­los re­gis­trie­ren und in die Be­nut­zer­ober­flä­che einbinden.

Was ist die TYPO3 Icon API?

Die TYPO3 Icon API gestattet es An­wen­de­rin­nen und Anwendern, Icons in die Be­nut­zer­ober­flä­che von TYPO3 zu in­te­grie­ren oder für andere Zwecke zu nutzen. Sie bietet eine stan­dar­di­sier­te Methode, um Icons innerhalb von Modulen, Buttons oder Menüs in TYPO3 ein­zu­set­zen und zu verwalten. Die API stellt sicher, dass Icons im gesamten TYPO3-System ein­heit­lich und kon­sis­tent verwendet werden, wodurch die Be­nut­zer­ober­flä­che klar struk­tu­riert und visuell an­spre­chend bleibt.

Wofür kann die TYPO3 Icon API genutzt werden?

Die TYPO3 Icon API wird verwendet, um Icons innerhalb des Backends und Frontends effizient zu in­te­grie­ren und an­zu­zei­gen. Dank der Pro­gram­mier­schnitt­stel­le besteht die Mög­lich­keit, TYPO3 Icons in ver­schie­de­nen Bereichen ein­zu­set­zen – etwa in Menüs, Buttons, Mo­dul­über­sich­ten oder Er­wei­te­run­gen.

Die API un­ter­stützt die Ein­bin­dung vor­ge­fer­tig­ter Icons, erlaubt aber auch die In­te­gra­ti­on eigener Icons, um in­di­vi­du­el­le Designs oder Branding-Elemente in TYPO3-Instanzen zu im­ple­men­tie­ren. Als besonders praktisch erweist sich die Schnitt­stel­le bei der Er­stel­lung oder Er­wei­te­rung be­nut­zer­de­fi­nier­ter Module, die spezielle Symbole – bei­spiels­wei­se für eine optische Ab­gren­zung – benötigen.

TYPO3 Icons: Zwei ver­schie­de­ne Icon­Pro­vi­der verfügbar

Der TYPO3 Core be­inhal­tet zwei ver­schie­de­ne Icon­Pro­vi­der:

• Der Bit­ma­pI­con­Pro­vi­der \TYPO3\CMS\Core\Imaging\IconProvider\BitmapIconProvider ist nicht nur für bmp-Icons ausgelegt, sondern auch für andere Da­tei­for­ma­te wie .jpg, .jpeg oder .gif.
• Der SvgI­con­Pro­vi­der \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider wurde speziell für TYPO3 Icons im SVG-Format kon­zi­piert. Diese lassen sich skalieren, können also ohne Qua­li­täts­ver­lust in un­ter­schied­li­chen Größen dar­ge­stellt werden.

Es besteht außerdem die Mög­lich­keit, be­nut­zer­de­fi­nier­te Icon­Pro­vi­der hin­zu­zu­fü­gen. Dazu ist es er­for­der­lich, eine Klasse zu de­fi­nie­ren und diese wie folgt zu im­ple­men­tie­ren: EXT:my_extension/Classes/Imaging/CustomIconProvider.php.

Welche TYPO3 Icons gibt es?

Der TYPO3 Core stellt eine um­fang­rei­che Sammlung von Icons bereit. Das Content-Ma­nage­ment-System nutzt eine stan­dar­di­sier­te Icon-Bi­blio­thek, die mehr als 700 Mini-Grafiken be­zie­hungs­wei­se Pik­to­gram­me be­inhal­tet. Dazu zählen bei­spiels­wei­se Na­vi­ga­ti­ons- und Me­nü­ele­men­te wie Pfeile sowie Icons für den Zugriff auf Sys­tem­funk­tio­nen, aber ebenso Favicons und Icons, die der Vi­sua­li­sie­rung be­stimm­ter Aktionen – etwa Speichern oder Löschen – dienen. Zudem ist es möglich, weitere Icons zu re­gis­trie­ren.

Um nach den be­reit­ge­stell­ten TYPO3 Icons zu suchen, bieten sich Ihnen ver­schie­de­ne Mög­lich­kei­ten. Eine erste Option stellt die Sty­le­gui­de-Extension dar. Nach deren In­stal­la­ti­on lassen sich die Icons im Backend über die Hilfe (?) einsehen. Al­ter­na­tiv ist es Ihnen auch möglich, die ver­füg­ba­ren Icons auf der TYPO3-GitHub-Seite TYPO3.Icons zu durch­stö­bern.

Wie werden Icons in TYPO3 re­gis­triert?

Die Re­gis­trie­rung sämt­li­cher TYPO3-Icons erfolgt in der Icon Registry. Ist es Ihr Ziel, Icons für eine Extension zu re­gis­trie­ren, besteht die Not­wen­dig­keit, in der Er­wei­te­rung eine Datei mit dem Namen Configuration/Icons.php zu erstellen. Diese sollte ein PHP-Kon­fi­gu­ra­ti­ons-Array mit folgenden Schlüs­seln her­aus­ge­ben:

<?php
declare(strict_types=1);
use TYPO3\CMS\Core\Imaging\IconProvider\BitmapIconProvider;
use TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider;
return [
    // Icon identifier
    'tx-myext-svgicon' => [
        // Icon provider class
        'provider' => SvgIconProvider::class,
        // The source SVG for the SvgIconProvider
        'source' => 'EXT:my_extension/Resources/Public/Icons/mysvg.svg',
    ],
    'tx-myext-bitmapicon' => [
        'provider' => BitmapIconProvider::class,
        // The source bitmap file
        'source' => 'EXT:my_extension/Resources/Public/Icons/mybitmap.png',
        // All icon providers provide the possibility to register an icon that spins
        'spinning' => true,
    ],
    'tx-myext-anothersvgicon' => [
        'provider' => SvgIconProvider::class,
        'source' => 'EXT:my_extension/Resources/Public/Icons/anothersvg.svg',
        // Since TYPO3 v12.0 an extension that provides icons for broader
        // use can mark such icons as deprecated with logging to the TYPO3
        // deprecation log. All keys (since, until, replacement) are optional.
        'deprecated' => [
            'since' => 'my extension v2',
            'until' => 'my extension v3',
            'replacement' => 'alternative-icon',
        ],
    ],
];

Wie werden TYPO3-Icons im Pro­gram­mier­code verwendet?

Um Icons an­zu­for­dern, verwenden Sie die TYPO3 Icon API (\TYPO3\CMS\Core\Imaging\Icon­Fac­to­ry):

<?php
declare(strict_types=1);
namespace MyVendor\MyExtension;
use TYPO3\CMS\Core\Imaging\IconFactory;
use TYPO3\CMS\Core\Imaging\IconSize;
final class MyClass
{
    public function __construct(
        private readonly IconFactory $iconFactory,
    ) {}
    public function doSomething()
    {
        $icon = $this->iconFactory->getIcon(
            'tx-myext-action-preview',
            IconSize::SMALL,
            'overlay-identifier',
        );
        // Do something with the icon, for example, assign it to the view
        // $this->view->assign('icon', $icon);
    }
}