@mmg-dev/webpipeline-icons-astro 1.0.1 → 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/src/components/index.ts +0 -1
- package/src/components/IconOtherDemo.astro +0 -30
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` |
|
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -131,7 +131,6 @@ export { default as IconNavigationZoom } from './IconNavigationZoom.astro';
|
|
|
131
131
|
export { default as IconOtherBeer } from './IconOtherBeer.astro';
|
|
132
132
|
export { default as IconOtherCoffee } from './IconOtherCoffee.astro';
|
|
133
133
|
export { default as IconOtherCompass } from './IconOtherCompass.astro';
|
|
134
|
-
export { default as IconOtherDemo } from './IconOtherDemo.astro';
|
|
135
134
|
export { default as IconOtherDiamond } from './IconOtherDiamond.astro';
|
|
136
135
|
export { default as IconOtherFigurine } from './IconOtherFigurine.astro';
|
|
137
136
|
export { default as IconOtherFlag } from './IconOtherFlag.astro';
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
interface Props {
|
|
3
|
-
size?: number;
|
|
4
|
-
width?: number;
|
|
5
|
-
height?: number;
|
|
6
|
-
title?: string;
|
|
7
|
-
class?: string;
|
|
8
|
-
'aria-label'?: string;
|
|
9
|
-
[key: string]: unknown;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const { size = 24, width, height, title, class: className, 'aria-label': ariaLabel, ...props } = Astro.props;
|
|
13
|
-
const hasLabel = !!title || !!ariaLabel;
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
<svg
|
|
17
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
18
|
-
fill="currentColor"
|
|
19
|
-
width={width ?? size}
|
|
20
|
-
height={height ?? size}
|
|
21
|
-
viewBox="0 0 24 24"
|
|
22
|
-
aria-hidden={hasLabel ? undefined : true}
|
|
23
|
-
aria-label={ariaLabel}
|
|
24
|
-
role={hasLabel ? 'img' : undefined}
|
|
25
|
-
class:list={['icon-other-demo', className]}
|
|
26
|
-
{...props}
|
|
27
|
-
>
|
|
28
|
-
{title && <title>{title}</title>}
|
|
29
|
-
<path d="M2.641 15h-1.29l.009-.41H2.64q.613 0 1.055-.274a1.85 1.85 0 0 0 .687-.765q.242-.489.242-1.133v-.531q0-.492-.14-.89a1.9 1.9 0 0 0-.395-.68 1.7 1.7 0 0 0-.617-.438 2 2 0 0 0-.797-.152H1.328v-.415h1.348q.532 0 .973.184.445.18.77.524.327.339.503.816.18.477.18 1.062v.52q0 .585-.18 1.063a2.252 2.252 0 0 1-1.281 1.34q-.45.18-1 .179M1.567 9.313V15h-.48V9.313zM10.244 14.59V15h-3.2v-.41zM7.189 9.313V15h-.48V9.313zm2.656 2.55v.41h-2.8v-.41zm.38-2.55v.414h-3.18v-.415zM11.792 9.313h.484l2.102 5.007 2.105-5.007h.48L14.561 15h-.367zm-.149 0h.426l.05 3.203V15h-.476zm5.051 0h.426V15h-.48v-2.484zM23.144 11.852v.609q0 .598-.156 1.082-.152.48-.445.824-.29.345-.696.527-.405.184-.914.184-.496 0-.906-.183a2 2 0 0 1-.7-.528 2.5 2.5 0 0 1-.452-.824 3.4 3.4 0 0 1-.16-1.082v-.61q0-.597.156-1.078.16-.483.453-.828a2 2 0 0 1 .7-.527q.405-.183.901-.184.51 0 .915.184.405.183.699.527t.449.828q.156.48.156 1.079m-.476.609v-.617q0-.504-.117-.906a1.9 1.9 0 0 0-.34-.688 1.5 1.5 0 0 0-.547-.437 1.7 1.7 0 0 0-.739-.153q-.402 0-.722.152a1.5 1.5 0 0 0-.547.438 2.1 2.1 0 0 0-.344.688 3.2 3.2 0 0 0-.117.906v.617q0 .507.117.914.122.402.348.691.225.285.547.438.324.152.726.152a1.7 1.7 0 0 0 .739-.152q.32-.152.543-.438.222-.289.335-.691.118-.405.118-.914"/>
|
|
30
|
-
</svg>
|