@mmg-dev/webpipeline-icons-stencil

Stencil FunctionalComponents aus der webpipeline-icons-Monorepo — zur Verwendung als JSX in anderen Stencil-Komponenten.

Installation

pnpm i -D @mmg-dev/webpipeline-icons-stencil

Peer-Dependency: @stencil/core >= 4.0 (muss im Projekt bereits vorhanden sein).

Hinweis: Die Beispiele verwenden pnpm. Alternativ funktionieren npm oder yarn analog (npm i -D, yarn add -D).

Projekt-Konfiguration

Das Package nutzt exports-Maps in der package.json, die nur mit "moduleResolution": "bundler" aufgelöst werden. In der tsconfig.json des konsumierenden Projekts muss diese Option gesetzt sein:

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

Wichtig — SVG-Namespace-Workaround: Stencil entfernt den SVG-Namespace-Support (createElementNS), wenn im Component-Template kein <svg>-Element gefunden wird. Da importierte FunctionalComponents bei der statischen Analyse nicht erkannt werden, müssen Komponenten, die Icon-FunctionalComponents verwenden, ein verstecktes SVG-Element im Template einbinden:

render() {
  return (
    <Host>
      <svg style={{ display: 'none' }} />
      {/* ... rest of the template ... */}
      <IconNavigationArrowDown />
    </Host>
  );
}

Ohne diesen Workaround werden die Icons als HTML-Elemente statt als SVG gerendert und sind nicht sichtbar. Siehe stenciljs/core#3953.

Import

// Barrel-Import (tree-shaking-fähig dank sideEffects: false):
import { IconNavigationArrowDown } from '@mmg-dev/webpipeline-icons-stencil';

Verwendung

import { Component, h } from '@stencil/core';
import { IconNavigationArrowDown } from '@mmg-dev/webpipeline-icons-stencil';

@Component({ tag: 'my-component', shadow: true })
export class MyComponent {
  render() {
    return (
      <div>
        {/* Standard (24×24) */}
        <IconNavigationArrowDown />

        {/* Benutzerdefinierte Größe */}
        <IconNavigationArrowDown size={32} />

        {/* Breite und Höhe unabhängig */}
        <IconNavigationArrowDown width={48} height={32} />

        {/* Farbe via CSS color */}
        <span style={{ color: '#e60000' }}>
          <IconNavigationArrowDown />
        </span>
      </div>
    );
  }
}

Vollständiges Beispiel (src/components/my-alert/my-alert.tsx):

import { Component, Prop } from '@stencil/core';
import { IconAlertCancelCircleFilled } from '@mmg-dev/webpipeline-icons-stencil';

@Component({ tag: 'my-alert', shadow: true })
export class MyAlert {
  @Prop() message: string;

  render() {
    return (
      <div class="alert" role="alert">
        <IconAlertCancelCircleFilled size={20} />
        <span>{this.message}</span>
      </div>
    );
  }
}

Accessibility

{/* Dekorativ (Default): aria-hidden="true" */}
<IconNavigationArrowDown />

{/* Semantisch: mit sichtbarem Titel */}
<IconNavigationArrowDown title="Nach unten" />

{/* Semantisch: mit Screen-Reader-Label */}
<IconNavigationArrowDown aria-label="Nach unten scrollen" />

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

Empfehlung: Icons neben Text sind in der Regel dekorativ. Alleinstehende Icons (z.B. Icon-Buttons) brauchen ein aria-label.

Props

| Prop | Typ | Default | Beschreibung | | ------------ | -------- | ------- | -------------------------------------------- | | size | number | 24 | Breite und Höhe gleichzeitig | | width | number | — | Überschreibt size für Breite | | height | number | — | Überschreibt size für Höhe | | title | string | — | Rendert <title> im SVG, setzt role="img" | | aria-label | string | — | Screen-Reader-Label, setzt role="img" |

Naming

| Kontext | Format | Beispiel | | -------------- | ------------------ | ------------------------- | | Stencil Export | Icon{PascalCase} | IconNavigationArrowDown |