Januar 2022
Paketservice: Shopicons einfacher in Webprojekte einbinden
Wie sich unser Open-Source-Iconset „Shopicons“ ganz einfach per Javascript- oder npm-Paket in das eigene Projekt einbinden läßt, beschreiben wir hier.
Von Markus Remscheid
Nicht immer müssen es die allgegenwärtigen Icons von Google Material Design oder Fontawesome sein. Mit Shopicons stellen wir eine stylishe und kostenlose Alternative bereit, die jetzt noch einfacher einzubinden ist.
Methode 1: Nutzung per Webkomponente
Frontendentwickler können bequem per Webkomponente auf die Icons zugreifen. Dazu stellen wir die 4 Symbolstärken (light, regular, bold, filled) in jeweils einem eigenen Javascript-Paket bereit. Nachdem ein Paket geladen wurde, kann mit einfachem HTML-Markup auf die enthaltenen Icons zugegriffen werden.
<!-- example -->
<script src="https://cdn.jsdelivr.net/npm/@h2d2/shopicons@1.2.0/umd/light.js"></script>
<shopicon-light-bed></shopicon-light-bed>
<shopicon-light-stars></shopicon-light-stars>
Neben dem Einbinden der Icons vereinfachen die Webkomponenten auch das Styling der Icons:
Iconfarbe:
Da in Webanwendungen die Iconfarbe meist der Farbe des umliegenden Textes entspricht, färben sich die Shopicons automatisch in der Textfarbe ein. Wird zum Beispiel ein Icon in einem Link verwendet und die Linkfarbe ändert sich bei Hover, erscheint das Icon auch in der Hoverfarbe. Die Iconfarbe kann aber auch per CSS individuell bestimmt werden.
Icongröße:
Über ein size-Attribut können die Icons bequem in vier Größen verwendet werden. Es stehen S, M, L und XL bereit. Die kleinste Größe „S“ entspricht einer Darstellungsgröße von 24 px. Dies ist zudem die kleinste Größe, auf die das Shopicons-Set optimiert ist. Weitere Größen sind 32 px, 48 px und 64 px.
Methode 2: Nutzung per npm-Paket
Zusätzlich stellen wir die Icons in einem npm-Paket zur Verfügung. Dies ist für alle Entwickler interessant, die mehr Kontrolle haben möchten und Icons einzeln in ihr Webprojekt laden möchten. Dazu muss zunächst das Shopicons-npm-Paket installiert werden.
npm install @h2d2/shopicons
Daraufhin können die Icons in das Projekt importiert werden. So werden nur die Icons geladen, die auch tatsächlich verwendet werden.
import "@h2d2/shopicons/es/bold/star";
import "@h2d2/shopicons/es/bold/heart";
import "@h2d2/shopicons/es/filled/heart";
const html = `
...
<shopicon-bold-stars size="large"></shopicon-bold-stars>
`;
Nach wie vor lassen sich natürlich auch alle Shopicons im SVG- oder PNG-Format von unserem GitHub-Verzeichnis herunterladen und auf dem eigenen Server ablegen. So können die Icons in Apps oder Webseiten mit eigenem HTML/CSS-Markup auf herkömmliche Weise integriert werden.
Über Shopicons
Shopicons ist ein kostenloses Iconset von H2D2, das für Online-Shops und Co. gedacht ist. Aktuell enthält das Set über 200 Flaticons in 4 Symbolstärken, verfügbar im SVG- und PNG-Format. Dabei ergänzen wir das Iconset immer wieder um neue Symbole. So enthält Shopicons mittlerweile auch Icons zu unterschiedlichen Themen wie Corona, Weihnachten, Wetter oder Elektromobilität. Wir empfehlen eine Abbildungsgröße von 24 px oder größer. Eine Übersicht aller Icons befindet sich hier.
Links
Shopicons Github-Verzeichnis:
https://github.com/H2D2-Design/h2d2-shopicons
Einfache Schritt-für-Schritt-Anleitung mit Codebeispielen:
https://github.com/H2D2-Design/h2d2-shopicons#readme
Shopicons-Landingpage mit Übersicht aller Icons:
http://shopicons.de/
Wir bedanken uns bei Michael Geers, Frontend-Engineer und Buchautor von „Micro Frontends (in Action)“ für das Aufsetzen des Komponentenmodells. Michael ist z. B. auf Twitter oder GitHub zu finden.
