Icon-API in TYPO3 ab Version 7.5

Seit TYPO3 7.5 steht eine neue Icon-API zur Verfügung um Icons im TYPO3 Backend zu registrieren oder abzufragen. In diesem Beitrag möchte ich das Konzept versuchen nahezubringen und zu zeigen wie einfach die Icon-API genutzt werden kann.

Allgemeines zur Icon-API

Die neue Icon-API ist ein Set von neuen PHP-Klassen welche im TYPO3 Core implementiert worden sind. Die Icon-API ist für das TYPO3 Backend konzipiert worden und sollte daher nicht im Frontend verwendet werden, auch wenn die Logik in der Extension EXT:core  abgelegt wurde. Jedes Icon im System besitzt einen eindeutigen und sprechenden Identifier, welcher ein wichtiger Bestandteil ist, auf den ich gleich noch näher eingehen werde.

Die Icon-API sorgt dafür, dass überall im Backend das gleiche Markup verwendet wird. Dadurch wird sichergestellt, dass jedes Icon – egal wo es verwendet wird – immer die richtigen Abmessungen hat und sich perfekt in das Layout einfügt. Hierbei spielt es keine Rolle ob das Icon eine Bitmap-Grafik, ein SVG oder ein Font-Icon ist. Jedes Icon welches in der IconRegistry  registriert wird bekommt einen IconProvider zugewiesen, welcher sicherstellt, dass das erzeugte Markup richtig formatiert ist. Der TYPO3 core stellt dazu drei IconProvider zur Verfügung:

  • BitmapIconProvider  – Für alle Bitmap Icons (Formate wie: gif, png, jpeg, etc)
  • SvgIconProvider  – Für Icon im SVG Format
  • FontawesomeIconProvider  – Ein Icon Provider für alle Icons über fontawesome.io

Sollte keiner der drei IconProvider passen, kann man auch einen eigenen IconProvider implementieren. Dieser muss lediglich das IconProviderInterface  implementieren. Darauf möchte ich hier aber nicht näher eingehen, da die Wahrscheinlichkeit dies jemals zu brauchen relativ gering ist.

Icon zur Nutzung registrieren

Damit man ein eigenes Icon nutzen kann, muss dieses in der IconRegistry  registriert werden. Dazu sind nur ein paar wenige Zeilen PHP Code in der Datei ext_localconf.php  nötig:

Was passiert hier genau? Als erstes wird eine Instanz der IconRegistry  benötigt. Diese wird nur einmal benötigt, auch wenn man mehrere Icons registrieren möchte. Der zweite Schritt ist dann der Aufruf der registerIcon  Methode. Das erste Argument ist der Icon-Identifier, ein eindeutiger String. Um Konflikte mit anderen Extensions zu vermeiden, empfehle ich einen tx- Prefix zu verwenden, wie man ihn schon von Datenbank-Tabellen her kennt. Der zweite Parameter ist der zuständige IconProvider. Das dritte und letzte Argument ist ein Array mit Optionen. Für den BitmapIconProvider  und SvgIconProvider  gibt es nur eine Option die source  Angabe, also der Pfad zur Icon-Datei. Beim FontawesomeIconProvider  gibt es hingegen nur die Option name . Mehr Informationen findet man auch in dem Feature-rst-File.

Damit ist jetzt das Icon in der IconRegistry  bekannt und kann über die Icon-API genutzt werden.

Icons abrufen und nutzen

Jetzt haben wir also ein Icon registriert, dieses können wir jetzt nutzen. An vielen Stellen im TCA benötigen wir nur den Icon-Identifier, dieser wird einfach als Option im TCA eingetragen. Aber wir können das Icon natürlich auch in unserer eigener Extension verwenden. Nehmen wir folgendes Beispiel: Das Icon welches wir eben registriert haben möchten wir nun in unserem Backend Modul ausgeben, dazu müssen wir das Icon also in unserem Controller holen und in die View geben:

OK, was passiert hier? Als erstes benötigen wir eine Instanz der IconFactory . Über diese Klasse kommen wir an die registrierten Icons ran. Mit Hilfe der getIcon  Methode bekommen wir ein Icon  Objekt, welches wir direkt in die View geben.

Die Methode bekommt als erstes Argument den gewünschten Icon-Identifier. Das zweite Argument gibt die Größe des Icons an. Alle für das TYPO3 Backend benötigten Größen stehen zur Verfügung. Das dritte Argument ist für einen optionalen Overlay-Identifier. Für das TYPO3 Backend stehen bereits gängige Overlay-Icons zur Verfügung, am Ende ist es ein Overlay aber auch nur ein Icon, d.h. eigene Overlays können wie ein Icon registriert werden.

ViewHelper für Fluid

Um die Arbeit mit den Icons in Fluid etwas einfacher zu machen, haben die Entwickler einen Fluid ViewHelper erstellt, dies erspart einem die Arbeit mit der IconFactory im Controller.

Verwendung sollte eigentlich selbsterklärend sein:

  1. Fluid Namespace registrieren
  2. ViewHelper verwenden :)

Fazit

Die Icon-API ist sehr hilfreich und einfach zu benutzen. Eine sehr hilfreiche Extension in Bezug auf die Icon-API (und viele andere gute Hinweise in Bezug auf Extension-Entwicklung im Backend) ist die Extension EXT:styleguide . Diese kann über das TER installiert werden oder immer die aktuellste Version direkt über github.

Ich hoffe ich konnte damit die wichtigsten und spannendsten Fragen zur neuen Icon-API im TYPO3 7.5 erklären. Sollte etwas unklar sein, gerne einen Kommentar hinterlassen oder mich direkt in Slack ansprechen.