@mmg-dev/webpipeline-icons-astro 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 +104 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# @mmg-dev/webpipeline-icons-astro
|
|
2
|
+
|
|
3
|
+
Astro-Komponenten aus der [webpipeline-icons](../../README.md)-Monorepo — generierte `.astro`-Komponenten mit Spread-Props.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm i -D @mmg-dev/webpipeline-icons-astro
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer-Dependency: `astro >= 6.0` (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
|
+
```astro
|
|
18
|
+
---
|
|
19
|
+
// Barrel-Import (tree-shaking-fähig dank sideEffects: false):
|
|
20
|
+
import { IconNavigationArrowDown } from '@mmg-dev/webpipeline-icons-astro';
|
|
21
|
+
---
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Verwendung
|
|
25
|
+
|
|
26
|
+
```astro
|
|
27
|
+
---
|
|
28
|
+
import { IconNavigationArrowDown } from '@mmg-dev/webpipeline-icons-astro';
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
<!-- Standard (24×24) -->
|
|
32
|
+
<IconNavigationArrowDown />
|
|
33
|
+
|
|
34
|
+
<!-- Benutzerdefinierte Größe -->
|
|
35
|
+
<IconNavigationArrowDown size={32} />
|
|
36
|
+
|
|
37
|
+
<!-- CSS-Klasse -->
|
|
38
|
+
<IconNavigationArrowDown class="text-primary" />
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**Vollständiges Beispiel (`src/components/Alert.astro`):**
|
|
42
|
+
|
|
43
|
+
```astro
|
|
44
|
+
---
|
|
45
|
+
import { IconAlertCancelCircleFilled } from '@mmg-dev/webpipeline-icons-astro';
|
|
46
|
+
|
|
47
|
+
interface Props {
|
|
48
|
+
message: string;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const { message } = Astro.props;
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
<div class="alert" role="alert">
|
|
55
|
+
<IconAlertCancelCircleFilled size={20} class="alert-icon" />
|
|
56
|
+
<p>{message}</p>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
.alert {
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
gap: 0.5rem;
|
|
64
|
+
}
|
|
65
|
+
.alert-icon {
|
|
66
|
+
color: var(--color-danger);
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
}
|
|
69
|
+
</style>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Accessibility
|
|
73
|
+
|
|
74
|
+
```astro
|
|
75
|
+
<!-- Dekorativ (Default): aria-hidden="true" -->
|
|
76
|
+
<IconNavigationArrowDown />
|
|
77
|
+
|
|
78
|
+
<!-- Semantisch: mit sichtbarem Titel -->
|
|
79
|
+
<IconNavigationArrowDown title="Nach unten" />
|
|
80
|
+
|
|
81
|
+
<!-- Semantisch: mit Screen-Reader-Label -->
|
|
82
|
+
<IconNavigationArrowDown aria-label="Nach unten scrollen" />
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
- **Dekorativ** (Default): `aria-hidden="true"` — Icon wird von Screen Readern ignoriert
|
|
86
|
+
- **Semantisch**: Wenn `title` oder `aria-label` gesetzt ist → `aria-hidden` wird entfernt, `role="img"` gesetzt
|
|
87
|
+
|
|
88
|
+
Empfehlung: Icons neben Text sind in der Regel dekorativ. Alleinstehende Icons (z.B. Icon-Buttons) brauchen ein `aria-label`.
|
|
89
|
+
|
|
90
|
+
## Props
|
|
91
|
+
|
|
92
|
+
| Prop | Typ | Default | Beschreibung |
|
|
93
|
+
| ------------ | -------- | ------- | -------------------------------------------- |
|
|
94
|
+
| `size` | `number` | `24` | Breite und Höhe |
|
|
95
|
+
| `title` | `string` | — | Rendert `<title>` im SVG, setzt `role="img"` |
|
|
96
|
+
| `class` | `string` | — | CSS-Klasse auf dem SVG-Element |
|
|
97
|
+
| `aria-label` | `string` | — | Screen-Reader-Label, setzt `role="img"` |
|
|
98
|
+
| `...props` | | — | Beliebige weitere Attribute |
|
|
99
|
+
|
|
100
|
+
## Naming
|
|
101
|
+
|
|
102
|
+
| Kontext | Format | Beispiel |
|
|
103
|
+
| ------------ | ------------------ | ------------------------- |
|
|
104
|
+
| Astro Export | `Icon{PascalCase}` | `IconNavigationArrowDown` |
|