TYPO3 Icons: So nutzen Sie die Icon API effizient

TYPO3 gestattet es Anwenderinnen und Anwendern, auf eine Vielzahl von Icons zurückzugreifen. Deren Integration und Verwaltung wird über die TYPO3 Icon API realisiert. Auch eigene TYPO3 Icons lassen sich problemlos registrieren und in die Benutzeroberfläche einbinden.

Was ist die TYPO3 Icon API?

Die TYPO3 Icon API gestattet es Anwenderinnen und Anwendern, Icons in die Benutzeroberfläche von TYPO3 zu integrieren oder für andere Zwecke zu nutzen. Sie bietet eine standardisierte Methode, um Icons innerhalb von Modulen, Buttons oder Menüs in TYPO3 einzusetzen und zu verwalten. Die API stellt sicher, dass Icons im gesamten TYPO3-System einheitlich und konsistent verwendet werden, wodurch die Benutzeroberfläche klar strukturiert und visuell ansprechend bleibt.
Hosten Sie Ihre TYPO3-Website
TYPO3 für Ihr Hosting Paket
  • Einfach: mit wenigen Klicks installiert
  • Sicher: SSL-Zertifikat inklusive
  • Schnell: PHP8, OPcache und SSD Webspace

Wofür kann die TYPO3 Icon API genutzt werden?

Die TYPO3 Icon API wird verwendet, um Icons innerhalb des Backends und Frontends effizient zu integrieren und anzuzeigen. Dank der Programmierschnittstelle besteht die Möglichkeit, TYPO3 Icons in verschiedenen Bereichen einzusetzen – etwa in Menüs, Buttons, Modulübersichten oder Erweiterungen.
Die API unterstützt die Einbindung vorgefertigter Icons, erlaubt aber auch die Integration eigener Icons, um individuelle Designs oder Branding-Elemente in TYPO3-Instanzen zu implementieren. Als besonders praktisch erweist sich die Schnittstelle bei der Erstellung oder Erweiterung benutzerdefinierter Module, die spezielle Symbole – beispielsweise für eine optische Abgrenzung – benötigen.
Tipp
In unserem Guide „TYPO3 installieren: Ausführliche Anleitung“ erläutern wir, wie Sie das Content-Management-System einrichten. Im Artikel „TYPO3-Webseiten erstellen“ erfahren Sie, wie Sie Schritt für Schritt Ihre eigene Webseite anfertigen.

TYPO3 Icons: Zwei verschiedene IconProvider verfügbar

Der TYPO3 Core beinhaltet zwei verschiedene IconProvider:
  • Der BitmapIconProvider \TYPO3\CMS\Core\Imaging\IconProvider\BitmapIconProvider ist nicht nur für bmp-Icons ausgelegt, sondern auch für andere Dateiformate wie .jpg, .jpeg oder .gif.
  • Der SvgIconProvider \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider wurde speziell für TYPO3 Icons im SVG-Format konzipiert. Diese lassen sich skalieren, können also ohne Qualitätsverlust in unterschiedlichen Größen dargestellt werden.
Hinweis
Der FontawesomeIconProvider, mit dem sich Icons auch mittels Schriftarten einbinden ließen, wurde in TYPO3 Version 12.0 entfernt.
Es besteht außerdem die Möglichkeit, benutzerdefinierte IconProvider hinzuzufügen. Dazu ist es erforderlich, eine Klasse zu definieren und diese wie folgt zu implementieren: EXT:my_extension/Classes/Imaging/CustomIconProvider.php.

Welche TYPO3 Icons gibt es?

Der TYPO3 Core stellt eine umfangreiche Sammlung von Icons bereit. Das Content-Management-System nutzt eine standardisierte Icon-Bibliothek, die mehr als 700 Mini-Grafiken beziehungsweise Piktogramme beinhaltet. Dazu zählen beispielsweise Navigations- und Menüelemente wie Pfeile sowie Icons für den Zugriff auf Systemfunktionen, aber ebenso Favicons und Icons, die der Visualisierung bestimmter Aktionen – etwa Speichern oder Löschen – dienen. Zudem ist es möglich, weitere Icons zu registrieren.
Um nach den bereitgestellten TYPO3 Icons zu suchen, bieten sich Ihnen verschiedene Möglichkeiten. Eine erste Option stellt die Styleguide-Extension dar. Nach deren Installation lassen sich die Icons im Backend über die Hilfe (?) einsehen. Alternativ ist es Ihnen auch möglich, die verfügbaren Icons auf der TYPO3-GitHub-Seite TYPO3.Icons zu durchstöbern.
E-Mail-Marketing-Tool
Jetzt Newsletter versenden und Umsatz generieren
  • Intuitive Gestaltung mittels Drag-and-Drop-Editor & KI-Funktionen
  • Viele professionelle Templates zur Auswahl
  • Einfacher und DSGVO-konformer Versand

Wie werden Icons in TYPO3 registriert?

Die Registrierung sämtlicher TYPO3-Icons erfolgt in der Icon Registry. Ist es Ihr Ziel, Icons für eine Extension zu registrieren, besteht die Notwendigkeit, in der Erweiterung eine Datei mit dem Namen Configuration/Icons.php zu erstellen. Diese sollte ein PHP-Konfigurations-Array mit folgenden Schlüsseln herausgeben:
<?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',
        ],
    ],
];
php

Wie werden TYPO3-Icons im Programmiercode verwendet?

Um Icons anzufordern, verwenden Sie die TYPO3 Icon API (\TYPO3\CMS\Core\Imaging\IconFactory):
<?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);
    }
}
php
Hinweis
Alternativ dazu besteht auch die Möglichkeit, den TYPO3 Fluid ViewHelper zu nutzen oder auf JavaScript zurückzugreifen.
War dieser Artikel hilfreich?