UI5 Library für Font Awesome Icons

Was haben eine Kamera und eine Waschmaschine gemeinsam? Eigentlich nichts. Im UI5-Bereich jedoch muss man oft kreativ werden. Außerdem ist die Auswahl der Standard-Icons gering und das Look & Feel versionsabhängig.

Aus diesem Grund hatte ich auch schon die Situation, eine Kamera als Waschmaschine „zweckzuentfremden“. Die Linse war gut als Trommel erkennbar und der Blitz als Bedienfeld. Blöd nur, dass nach einem Update mehr Konturen dazukamen, welche die Kamera eindeutig als Kamera identifizierten.

Da dieses Thema natürlich kein neues Problem ist, kann man in UI5 mittlerweile das IconPool Framework nutzen und eigene Icons registrieren. Aber irgendwie ist es immer wieder mühselig, die Icon-Dateien aufzutreiben und die Metadaten ordentlich zu pflegen.

UI5 Library Projekt

Aus diesem Grund habe ich mir eine passende Lösung überlegt, die ich Ihnen gerne mit meinem neuen Projekt zur Verfügung stellen möchte: Ich habe die bekannteste und größte Icon-Bibliothek, Font Awesome, genommen und in eine UI5 Library gepackt.

GitHub Repository

Mit Nutzung der Library stehen alle kostenfreien Font Awesome Icons zur Verfügung. Die Library kann zudem mit wenigen einfachen Schritten mit einer Pro-Lizenz um die kostenpflichtigen Icons erweitert werden. Damit ist es möglich, die 704 Standard-Icons um ganze 61.764 weitere Icons zu erweitern.

Um die Library zum Entwickeln nutzen zu können, reicht es, ein NPM Modul zu installieren und eine ui5-middleware Konfiguration zu hinterlegen. Mehr dazu finden Sie im Repository.

Showcase Anwendung

Um die Icon-Auswahl noch einfacher zu gestalten, habe ich außerdem einen kleinen Klon des bekannten Icon Explorers geschrieben, der alle Icons beinhaltet. Schauen Sie gerne vorbei: ui5-community.github.io/ui5-icon-explorer

GitHub Repository