Max-Ludwig Stadler
Max-Ludwig Stadler
 - 25. Januar 2019

So erstellen Sie eigene UI5 Icons

UI5 verfügt über hunderte Icons. Trotzdem kommt es immer wieder vor, dass beim Design einer App genau das gewünschte Icon nicht existiert. Ich zeige Ihnen, wie Sie Ihre eigenen Icons selbst erstellen können.

Schritt 1: Gewünschte Icons erstellen

Ihre eigenen Icons für UI5 Apps erstellen Sie am besten im SVG-Format. Das hat mehrere Vorteile, so können bspw. weiterhin in der App Stylings (Accept / Reject / etc.) auf dem Icon angewendet werden. Vektorgrafiken lassen sich z.B. mit dem kostenlosen Tool Inkscape erstellen. Gleichzeitig ermöglicht es Ihnen auch, bereits existierende Icon-Bilder in anderem Format in eine Vektorgrafik zu konvertieren.
Inkscape Beispiel

Schritt 2: Vektorgrafiken in Fonts umwandeln

Nachdem Sie alle Ihre Icons in Form von Vektorgrafiken erstellt haben, müssen diese als nächstes in einen eigenen Icon-Font umgewandelt werden. Für diesen Schritt empfiehlt sich bspw. die IcoMoon App. Hier können ganz einfach all Ihre selbst erstellten Icons in Fonts umgewandelt werden.

IcoMoon1 IcoMoon2

Wenn Sie Ihre Icons geordnet und umgewandelt haben, können Sie einen Ordner herunterladen, der alle notwendigen Dateien für die nächsten Schritte enthält. Besonders praktisch: Im nächsten Schritt ist das Schreiben von ein paar CSS-Zeilen notwendig, um den neuen Font einzubinden. Diese Zeilen sind ebenfalls im Ordner enthalten!

IcoMoon Download

Schritt 3: Eigenen Font in der UI5 App verwenden

Um nun den eigenen Font in einer UI5 App verwenden zu können, müssen Sie zunächst in einer CSS-File der App Ihren Font registrieren. Der Code dafür findet sich in der Datei „style“ in dem zuvor heruntergeladenen Ordner.

Einfügen in die App

Anschließend müssen die Icons hinzugefügt werden:

sap.ui.core.IconPool.addIcon(‚MMIcon‘, ‚customfont‘, ‚icomoon‘, ‚e900‘);

Geschafft! Ab nun können Sie Ihre eigenen Icon-Fonts in Ihrer App verwenden. Als Link dafür nutzen Sie sap-icon://customfont/{Name Ihres Icons}.

E-Book: App-Entwicklung

In diesem E-Book geht es um die Entwicklung von Enterprise-Apps mit SAPUI5 und OData.

Haben Sie Fragen?

Sie haben weitere Fragen oder Probleme mit dem Einfügen von Icon-Fonts in Ihren UI5-Apps? Sie brauchen Beratung im Bereich UI5? Gerne stehe ich Ihnen für Fragen zur Verfügung. Schreiben Sie einfach unter diesem Artikel oder kontaktieren Sie mich persönlich. Oder werfen Sie einen Blick in unser E-Book App Entwicklung mit OData & SAPUI5.

Max-Ludwig Stadler

Max-Ludwig Stadler

Nach meinem Masterstudium in Informatik habe ich meine Begeisterung für IT zum Beruf gemacht und bin als zertifizierter SAP-Consultant bei der mindsquare im Fachbereich Mission-Mobile tätig. Meine Schwerpunkte liegen vor allem in der UI5- und Neptune-Entwicklung.

Sie haben Fragen? Kontaktieren Sie mich!




Das könnte Sie auch interessieren


Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support