by Andreas Dormann

Apps ❤ Icons

4.06.2018 in Media & More

Das neue Icon-Set des Javascript-Frameworks Ionic 4

Icons spielen eine entscheidende Rolle als visuelle Komponente und Sprache, die in fast allen Apps verwendet wird. Icons sind eine elegante Möglichkeit, trotz begrenzter Bildschirmflächen auf Mobilgeräten Informationen zu übermitteln und gleichzeitig wertvollen Platz zu sparen.

Die Macher von Ionic, einem der populärtsen App-Entwicklungs-Frameworks dieser Zeit, haben mit den Ionicons Entwicklern eine einfache Möglichkeit gegeben, schnell Apps erstellen zu können, ohne sich Gedanken darüber machen zu müssen, wo sie großartig aussehende Icons für ihre Benutzeroberfläche finden können.

Ionicons v4 ist nun eine der ersten großen Icon-Bibliotheken (fast 700 Icons), die als Web-Komponenten bereit gestellt werden, mit drastisch reduzierten Größen, neuen Icon-Formen, die die neuesten iOS- und Material-Design-Stile widerspiegeln, und einem Fokus auf Benutzerfreundlichkeit.

Neues Design
Alle vorherigen Versionen von Ionicons wurden absichtlich von iOS 8+ / Android MD-Ikonographie inspiriert und basieren darauf. Ziel ist es, dass die Symbole den Benutzern auf diesen Plattformen ein Gefühl von Komfort und Vertrautheit vermitteln, indem sie die gewohnten stilistischen Formen widerspiegeln.

Die Icons sind nicht aufdringlich, um nicht von der Kernerfahrung wegzukommen, aber vertraut genug, um Klarheit zu schaffen. Mit Ionicons v4 wurden die iOS-Symbole neu gestaltet, um Apples aktualisierten Designrichtlinien besser zu entsprechen, und den MD-Icons eine ansprechendere Feinabstimmung gegeben.

Keine Icon-Fonts mehr
Die ursprünglichen Ionicons wurden als Icon-Schriftart (Fonts) veröffentlicht. Eine Zeit lang war das sehr sinnvoll: Icon-Fonts sind vektorbasiert, skalierbar auf jede physikalische Größe ohne zu verpixeln, können mit CSS gestylt werden und kommen von einer einzigen Ressource (was weniger HTTP-Anfragen bedeutet).

Während Icon-Schriften in einigen Fällen immer noch eine gültige Option sind, kann sich deren Vorteil in einen Nachteil verwandeln: Alle Icons sind in einer Datei zusammengefasst. Und in früheren Versionen von Ionicons steckten fast 700 Icons in einer große Datei. Warum ist das ein großes Problem? Große Font-Dateien wirken sich negativ auf die Ladezeiten beim erstmaligen Aufruf einer Webseite oder App aus. Darüber hinaus ist das Hinzufügen von benutzerdefinierten Symbolen zu einem Icon-Font alles andere als einfach.

SVGs
Mit Ionicons v4 kommen nun SVGs zum Einsatz. Alle Vorteile von Font-Icons (vektorbasiert und mit CSS gestylt) lassen sich genauso gut mit SVGs erreichen, aber ohne das ganze Gepäck. SVGs werden seit vielen Jahren umfassend unterstützt und sind für Designer leicht zu erstellen.

Die Herausforderung bestand und besteht darin, externe SVG-Dateien anzufordern und sie weiterhin mit CSS zu gestalten. Das traditionelle <img> kann funktionieren, aber Entwickler verlieren die Fähigkeit, die Farbe des Icons mit einfachem CSS zu ändern. Wenn es nur einen Weg gäbe, ein eigenes <img> -Element zu bauen, um genau das zu tun, was Entwickler wollen …

Bringt es zusammen mit Webkomponenten
Die neue Generation von Ionicons nutzt jetzt Web-Komponenten, um die Vorteile der guten Teile von Schriftarten-Icons und externen SVGs zu nutzen. Die ion-icon Web-Komponente kann nur die externen SVGs laden, die vom Benutzer aktiv angezeigt werden. Durch die Verwendung von Web-Standards anstatt eines spezifischen Frameworks können die neuen Ionicons in allen Frameworks oder ohne irgendein Framework verwendet werden.

Anstatt immer das gesamte Icon Pack herunterzuladen, laden Ionic Apps nur noch die Icons, die die App benötigt. Stellen Sie sich die Komponente im Grunde als ein <img> vor, das speziell für externe SVG-Dateien entwickelt wurde, jedoch mit einem gewissen Zusatz zur Verbesserung der Leistung.

Weitere Details zu diesem Thema hat das Ionic-Team in seinen neuen Ionicons Usage docs veröffentlicht.

Schlagworte: Apps, Grafik-Design, Icons, Ionic, Ionicons