@mmg-dev/webpipeline-icons-astro

Astro-Komponenten aus der webpipeline-icons-Monorepo — generierte .astro-Komponenten mit Spread-Props.

Installation

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

Peer-Dependency: astro >= 6.0 (muss im Projekt bereits vorhanden sein).

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

Import

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

Verwendung

---
import { IconNavigationArrowDown } from '@mmg-dev/webpipeline-icons-astro';
---

<!-- Standard (24×24) -->
<IconNavigationArrowDown />

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

<!-- CSS-Klasse -->
<IconNavigationArrowDown class="text-primary" />

Vollständiges Beispiel (src/components/Alert.astro):

---
import { IconAlertCancelCircleFilled } from '@mmg-dev/webpipeline-icons-astro';

interface Props {
  message: string;
}

const { message } = Astro.props;
---

<div class="alert" role="alert">
  <IconAlertCancelCircleFilled size={20} class="alert-icon" />
  <p>{message}</p>
</div>

<style>
  .alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .alert-icon {
    color: var(--color-danger);
    flex-shrink: 0;
  }
</style>

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 | | title | string | — | Rendert <title> im SVG, setzt role="img" | | class | string | — | CSS-Klasse auf dem SVG-Element | | aria-label | string | — | Screen-Reader-Label, setzt role="img" | | ...props | | — | Beliebige weitere Attribute |

Naming

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