webpipeline-icons-stencil-components

Stencil Web Components (Custom Elements mit Shadow DOM) aus der webpipeline-icons-Monorepo — ein Tag pro Icon (icon-*). Dieses Paket wird nicht über npm verteilt: das Kompilat wird auf unserer Infrastruktur gehostet und direkt im HTML (oder per <script type="module">) eingebunden — im Gegensatz zu React, Astro, LWC und Stencil FunctionalComponents, die in Apps als npm-Abhängigkeit genutzt werden.

Einbindung (Self-hosting)

Das deploybare Bundle entspricht dem Repo-Ordner public/ (mit dem darin enthaltenen Ordner bundle/). Nach dem Build und Deploy legt ihr die Basis-URL fest, unter der diese Struktur erreichbar ist.

Den Haupteinstieg als Modul laden — im Build bundle/bundle.esm.js. Beim Ausführen startet Stencil seine Lazy-Load-Logik: Es werden nicht alle Icon-Chunks auf einmal geladen, sondern nur die, die auf der Seite vorkommen.

<script type="module" src="https://domain.tld/public/bundle/bundle.esm.js"></script>

Verwendung (HTML)

Tag-Name: icon-{name} mit kebab-case wie nach bun optimize, z. B. icon-navigation-arrow-down.

<!-- Standard (24×24) -->
<icon-navigation-arrow-down></icon-navigation-arrow-down>

<!-- Größe -->
<icon-navigation-arrow-down size="32"></icon-navigation-arrow-down>

<!-- Farbe über CSS (currentColor) -->
<span style="color: #e60000">
  <icon-navigation-arrow-down></icon-navigation-arrow-down>
</span>

Optional: Entwicklung im Monorepo

Wer innerhalb dieses Repos z. B. eine Integration baut, kann den Loader weiterhin per Modul-Import auflösen (Auflösung über die package.json des Workspaces):

import { defineCustomElements } from 'webpipeline-icons-stencil-components/loader';

void defineCustomElements();

Das ersetzt nicht die produktive HTML-Einbindung über die gehostete public/-URL.

Accessibility

<!-- Dekorativ (Default): aria-hidden="true" -->
<icon-navigation-arrow-down></icon-navigation-arrow-down>

<!-- Semantisch: sichtbarer Titel im SVG -->
<icon-navigation-arrow-down icon-title="Nach unten"></icon-navigation-arrow-down>

<!-- Semantisch: Screen-Reader-Label -->
<icon-navigation-arrow-down aria-label="Nach unten scrollen"></icon-navigation-arrow-down>

• Dekorativ (Default): aria-hidden="true" — Icon wird von Screen Readern ignoriert.
• Semantisch: Wenn icon-title oder aria-label gesetzt ist → kein aria-hidden, role="img" wo passend.

Props (Attribute)

| Attribut | Typ | Default | Beschreibung | | -------------- | ---------- | ------- | ------------------------------------- | | size | number | 24 | Breite und Höhe gleichzeitig | | width | number | — | Überschreibt size für die Breite | | height | number | — | Überschreibt size für die Höhe | | icon-title | string | — | Rendert <title> im SVG | | aria-label | string | — | Screen-Reader-Label |

Naming

| Kontext | Format | Beispiel | | -------------- | ------------------- | --------------------------- | | Custom-Element | icon-{kebab-case} | icon-navigation-arrow-down |

Kompilat (Monorepo)

Die Build-Ausgabe liegt im Repo-Root unter public/bundle (siehe stencil.config.ts). Vor Commit lokal bauen:

# im Monorepo-Root
bun run build:stencil-components

Die interaktive Preview lebt im separaten Repository gbw-icon-preview und konsumiert das Bundle über die gehostete URL.

Details zum Gesamtprozess (CI, Artifact public/): README im Monorepo-Root.