@mmg-dev/webpipeline-icons-react 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# @mmg-dev/webpipeline-icons-react
|
|
2
|
+
|
|
3
|
+
React-Komponenten aus der [webpipeline-icons](../../README.md)-Monorepo — generierte `forwardRef`-Komponenten mit vollem TypeScript-Support.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm i -D @mmg-dev/webpipeline-icons-react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer-Dependency: `react >= 19.2` (muss im Projekt bereits vorhanden sein).
|
|
12
|
+
|
|
13
|
+
> **Hinweis:** Die Beispiele verwenden `pnpm`. Alternativ funktionieren `npm` oder `yarn` analog (`npm i -D`, `yarn add -D`).
|
|
14
|
+
|
|
15
|
+
## Import
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// Barrel-Import (tree-shaking-fähig dank sideEffects: false):
|
|
19
|
+
import { IconNavigationArrowDown } from '@mmg-dev/webpipeline-icons-react';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Verwendung
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
function MyComponent() {
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
{/* Standard (24×24) */}
|
|
29
|
+
<IconNavigationArrowDown />
|
|
30
|
+
|
|
31
|
+
{/* Benutzerdefinierte Größe */}
|
|
32
|
+
<IconNavigationArrowDown size={32} />
|
|
33
|
+
|
|
34
|
+
{/* Breite und Höhe unabhängig */}
|
|
35
|
+
<IconNavigationArrowDown width={48} height={32} />
|
|
36
|
+
|
|
37
|
+
{/* Farbe via Style oder CSS-Klasse */}
|
|
38
|
+
<IconNavigationArrowDown style={{ color: '#e60000' }} />
|
|
39
|
+
<IconNavigationArrowDown className="text-primary" />
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
**Vollständiges Beispiel (`src/components/IconButton.tsx`):**
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { IconNavigationArrowDown } from '@mmg-dev/webpipeline-icons-react';
|
|
49
|
+
|
|
50
|
+
interface IconButtonProps {
|
|
51
|
+
onClick: () => void;
|
|
52
|
+
label: string;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export function IconButton({ onClick, label }: IconButtonProps) {
|
|
56
|
+
return (
|
|
57
|
+
<button type="button" onClick={onClick}>
|
|
58
|
+
<IconNavigationArrowDown size={20} aria-hidden />
|
|
59
|
+
<span>{label}</span>
|
|
60
|
+
</button>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
**Alle SVG-Props werden durchgereicht** (`ref`, `className`, `style`, `onClick`, etc.):
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<IconNavigationArrowDown
|
|
69
|
+
ref={iconRef}
|
|
70
|
+
className="my-icon"
|
|
71
|
+
onClick={() => console.log('clicked')}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Accessibility
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
{/* Dekorativ (Default): aria-hidden="true" */}
|
|
79
|
+
<IconNavigationArrowDown />
|
|
80
|
+
|
|
81
|
+
{/* Semantisch: mit sichtbarem Titel */}
|
|
82
|
+
<IconNavigationArrowDown title="Nach unten" />
|
|
83
|
+
|
|
84
|
+
{/* Semantisch: mit Screen-Reader-Label */}
|
|
85
|
+
<IconNavigationArrowDown aria-label="Nach unten scrollen" />
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
- **Dekorativ** (Default): `aria-hidden="true"` — Icon wird von Screen Readern ignoriert
|
|
89
|
+
- **Semantisch**: Wenn `title` oder `aria-label` gesetzt ist → `aria-hidden` wird entfernt, `role="img"` gesetzt
|
|
90
|
+
|
|
91
|
+
Empfehlung: Icons neben Text sind in der Regel dekorativ. Alleinstehende Icons (z.B. Icon-Buttons) brauchen ein `aria-label`.
|
|
92
|
+
|
|
93
|
+
## Props
|
|
94
|
+
|
|
95
|
+
| Prop | Typ | Default | Beschreibung |
|
|
96
|
+
| ------------ | -------------------- | ------- | -------------------------------------------- |
|
|
97
|
+
| `size` | `number` | `24` | Breite und Höhe gleichzeitig |
|
|
98
|
+
| `width` | `number` | — | Überschreibt `size` für Breite |
|
|
99
|
+
| `height` | `number` | — | Überschreibt `size` für Höhe |
|
|
100
|
+
| `title` | `string` | — | Rendert `<title>` im SVG, setzt `role="img"` |
|
|
101
|
+
| `aria-label` | `string` | — | Screen-Reader-Label, setzt `role="img"` |
|
|
102
|
+
| `ref` | `Ref<SVGSVGElement>` | — | React Ref auf das SVG-Element |
|
|
103
|
+
| `...props` | `SVGProps` | — | Alle standard SVG/HTML-Attribute |
|
|
104
|
+
|
|
105
|
+
## Naming
|
|
106
|
+
|
|
107
|
+
| Kontext | Format | Beispiel |
|
|
108
|
+
| ------------ | ------------------ | ------------------------- |
|
|
109
|
+
| React Export | `Icon{PascalCase}` | `IconNavigationArrowDown` |
|