@mmg-dev/webpipeline-icons-react

React-Komponenten aus der webpipeline-icons-Monorepo — generierte forwardRef-Komponenten mit vollem TypeScript-Support.

Installation

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

Peer-Dependency: react >= 19.2 (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-react';

Verwendung

function MyComponent() {
  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 Style oder CSS-Klasse */}
      <IconNavigationArrowDown style={{ color: '#e60000' }} />
      <IconNavigationArrowDown className="text-primary" />
    </div>
  );
}

Vollständiges Beispiel (src/components/IconButton.tsx):

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

interface IconButtonProps {
  onClick: () => void;
  label: string;
}

export function IconButton({ onClick, label }: IconButtonProps) {
  return (
    <button type="button" onClick={onClick}>
      <IconNavigationArrowDown size={20} aria-hidden />
      <span>{label}</span>
    </button>
  );
}

Alle SVG-Props werden durchgereicht (ref, className, style, onClick, etc.):

<IconNavigationArrowDown
  ref={iconRef}
  className="my-icon"
  onClick={() => console.log('clicked')}
/>

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" | | ref | Ref<SVGSVGElement> | — | React Ref auf das SVG-Element | | ...props | SVGProps | — | Alle standard SVG/HTML-Attribute |

Naming

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