@conciso/design-system 2.1.0 → 2.2.0
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 +31 -24
- package/css/components.css +6 -0
- package/css/dark-mode.css +10 -0
- package/dist/conciso-ds.css +16 -0
- package/icons/README.md +138 -114
- package/icons/icons.d.ts +118 -0
- package/icons/icons.js +1356 -1150
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -41,15 +41,8 @@ Ausführlich in [docs/GETTING-STARTED.md](docs/GETTING-STARTED.md). Kurzfassung:
|
|
|
41
41
|
|
|
42
42
|
Die Schriften (Montserrat + Libre Baskerville) liegen self-hosted unter `fonts/` und werden über `css/fonts.css` eingebunden — keine externe CDN-Anfrage. Das gebündelte `dist/conciso-ds.css` enthält die `@font-face`-Regeln bereits.
|
|
43
43
|
|
|
44
|
-
**Variante B — als npm-Paket
|
|
44
|
+
**Variante B — als npm-Paket von npmjs.org** (der empfohlene Weg):
|
|
45
45
|
|
|
46
|
-
Das Paket liegt privat und org-scoped in GitHub Packages. Das Konsumenten-Projekt
|
|
47
|
-
braucht dafür eine `.npmrc`, die den `@conciso`-Scope umleitet:
|
|
48
|
-
|
|
49
|
-
```ini
|
|
50
|
-
@conciso:registry=https://npm.pkg.github.com
|
|
51
|
-
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
|
|
52
|
-
```
|
|
53
46
|
```bash
|
|
54
47
|
npm install @conciso/design-system
|
|
55
48
|
```
|
|
@@ -57,32 +50,46 @@ npm install @conciso/design-system
|
|
|
57
50
|
import '@conciso/design-system/dist/conciso-ds.css';
|
|
58
51
|
// Tokens (optional, für JS/Framework):
|
|
59
52
|
import { tokens } from '@conciso/design-system/tokens';
|
|
60
|
-
// Icons (optional, maschinenlesbar — komplette <svg>-Bodies, currentColor):
|
|
61
|
-
|
|
53
|
+
// Icons (optional, maschinenlesbar — komplette <svg>-Bodies, currentColor): benannter Import
|
|
54
|
+
// pro Icon, tree-shakable — nur importierte Glyphen landen im Bundle:
|
|
55
|
+
import { uiShieldCheck } from '@conciso/design-system/icons';
|
|
56
|
+
// Das aggregierte `icons`-Objekt (oder icons.json) zieht immer alle Icons ins Bundle — nur
|
|
57
|
+
// für Kataloge/Doku, nicht für Apps. Details: icons/README.md.
|
|
62
58
|
// Brand-Logo (Wortmarke, drei Varianten):
|
|
63
59
|
import logo from '@conciso/design-system/assets/brand/logo-conciso.svg';
|
|
64
60
|
```
|
|
65
61
|
|
|
62
|
+
Keine `.npmrc` nötig — das Paket liegt auf der öffentlichen npm-Registry, `npm install`
|
|
63
|
+
funktioniert ohne weitere Einrichtung. Siehe [ADR-0011](docs/adr/0011-veroeffentlichung-auf-npmjs.md).
|
|
64
|
+
Gilt ab dem ersten echten Release nach dem Merge dieser Änderung; bis dahin liegt auf
|
|
65
|
+
npmjs nur eine Bootstrap-Platzhalterversion (siehe ADR-0011).
|
|
66
|
+
|
|
66
67
|
Die Wortmarke liegt als SVG unter [`assets/brand/`](assets/brand/README.md) (Default, Light, Dark). Größen, Schutzraum und Verwendung stehen in der Doku unter **Marke → Logo**.
|
|
67
68
|
|
|
68
69
|
> Das Paket steht unter der [MIT-Lizenz](LICENSE) (Ausnahmen — Brand-Assets, Schriften,
|
|
69
|
-
> Icons — siehe [NOTICE](NOTICE))
|
|
70
|
-
>
|
|
71
|
-
>
|
|
72
|
-
> `
|
|
73
|
-
>
|
|
74
|
-
>
|
|
70
|
+
> Icons — siehe [NOTICE](NOTICE)).
|
|
71
|
+
>
|
|
72
|
+
> **Alternative — GitHub Packages** (weiterhin verfügbar, unverändert, z. B. für
|
|
73
|
+
> Consumer innerhalb der GitHub-Organisation `conciso`): eine `.npmrc`, die den
|
|
74
|
+
> `@conciso`-Scope umleitet, plus ein Token mit Scope `read:packages` auch fürs Lesen
|
|
75
|
+
> (in GitHub Actions genügt `secrets.GITHUB_TOKEN`):
|
|
76
|
+
> ```ini
|
|
77
|
+
> @conciso:registry=https://npm.pkg.github.com
|
|
78
|
+
> //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
|
|
79
|
+
> ```
|
|
80
|
+
> GitHub Packages verlangt diese Auth wegen der **Registry**, nicht wegen der Lizenz.
|
|
81
|
+
> Details in [Getting Started](docs/GETTING-STARTED.md#1-einbinden), Begründung in
|
|
82
|
+
> [ADR-0004](docs/adr/0004-verteilung-und-versionierung.md). Ohne npm bleibt Variante A
|
|
83
|
+
> (Vendoren von `dist/conciso-ds.css` + `fonts/`) der schlankeste Weg.
|
|
75
84
|
>
|
|
76
|
-
>
|
|
77
|
-
>
|
|
78
|
-
>
|
|
79
|
-
> <https://conciso.github.io/conciso-design-system/> — ohne Auth, aber `noindex` (nicht für
|
|
80
|
-
> Suchmaschinen bestimmt). Details und Abwägung in
|
|
85
|
+
> Die **Doku** (Storybook, die Komponenten-Referenz der Angular-Lib) ist öffentlich
|
|
86
|
+
> einsehbar unter <https://conciso.github.io/conciso-design-system/> — ohne Auth, aber
|
|
87
|
+
> `noindex` (nicht für Suchmaschinen bestimmt). Details und Abwägung in
|
|
81
88
|
> [ADR-0009](docs/adr/0009-storybook-oeffentlich-auf-github-pages.md).
|
|
82
89
|
|
|
83
90
|
**Angular:** Für Angular gibt es Komponenten statt nur CSS-Klassen —
|
|
84
|
-
`@conciso/design-system-angular` aus
|
|
85
|
-
Siehe [README der Lib](angular-lib/projects/design-system-angular/README.md).
|
|
91
|
+
`@conciso/design-system-angular` aus denselben beiden Registries, im Lockstep auf
|
|
92
|
+
derselben Version. Siehe [README der Lib](angular-lib/projects/design-system-angular/README.md).
|
|
86
93
|
|
|
87
94
|
**Dark Mode:** `data-theme="dark"` am `<html>` setzen. Siehe [Getting Started](docs/GETTING-STARTED.md#3-dark-mode) für das Anti-Flash-Snippet.
|
|
88
95
|
|
|
@@ -123,7 +130,7 @@ npm run check:contrast # Kontrast der gerenderten Doku in Light UND Dark
|
|
|
123
130
|
|
|
124
131
|
## Versionierung
|
|
125
132
|
|
|
126
|
-
[SemVer](https://semver.org/lang/de/). Die Version steht **nicht** im Repo, sondern im jeweiligen Git-Tag `vX.Y.Z`; Änderungen dazu stehen im zugehörigen GitHub-Release. Releases entstehen automatisch aus Conventional Commits auf `main` ([ADR-0010](docs/adr/0010-release-ausloesung-und-versionsquelle.md)) und werden nach GitHub Packages veröffentlicht. Der handgeschriebene [CHANGELOG](CHANGELOG.md) ist mit Version 2.0.0 eingefroren. `@conciso/design-system` und `@conciso/design-system-angular` tragen dabei im **Lockstep** immer dieselbe Version, damit die peerDependency der Angular-Lib auf die CSS-Schicht eng gepinnt auflöst ([ADR-0004](docs/adr/0004-verteilung-und-versionierung.md)).
|
|
133
|
+
[SemVer](https://semver.org/lang/de/). Die Version steht **nicht** im Repo, sondern im jeweiligen Git-Tag `vX.Y.Z`; Änderungen dazu stehen im zugehörigen GitHub-Release. Releases entstehen automatisch aus Conventional Commits auf `main` ([ADR-0010](docs/adr/0010-release-ausloesung-und-versionsquelle.md)) und werden nach npmjs.org **und** GitHub Packages veröffentlicht ([ADR-0011](docs/adr/0011-veroeffentlichung-auf-npmjs.md)). Der handgeschriebene [CHANGELOG](CHANGELOG.md) ist mit Version 2.0.0 eingefroren. `@conciso/design-system` und `@conciso/design-system-angular` tragen dabei im **Lockstep** immer dieselbe Version, damit die peerDependency der Angular-Lib auf die CSS-Schicht eng gepinnt auflöst ([ADR-0004](docs/adr/0004-verteilung-und-versionierung.md)).
|
|
127
134
|
|
|
128
135
|
## Lizenz & Kontakt
|
|
129
136
|
|
package/css/components.css
CHANGED
|
@@ -43,6 +43,12 @@
|
|
|
43
43
|
.btn-ki {--c500:var(--ki-800);--c50:var(--ki-50)}
|
|
44
44
|
.btn-es {--c500:var(--es-700);--c50:var(--es-50)}
|
|
45
45
|
.btn-wo {--c500:var(--wo-700);--c50:var(--wo-50)}
|
|
46
|
+
/* Ton-Modifier: destruktive Aktion, die sich nicht rückgängig machen lässt (Löschen, Verwerfen).
|
|
47
|
+
Setzt dieselben zwei Tokens wie die Bereichsklassen und steht deshalb hinter ihnen: Trägt ein
|
|
48
|
+
Button beide Klassen, gewinnt der Ton. Kombinierbar mit jeder Stil-Variante, gedacht für Filled,
|
|
49
|
+
Outlined und Text. Light: Weiß auf --c-error 8,01:1, --c-error auf bg-page 8,01:1, Tonal-Text auf
|
|
50
|
+
--c-error-bg 4,99:1. Dark-Werte in dark-mode.css. */
|
|
51
|
+
.btn-err {--c500:var(--c-error);--c50:var(--c-error-bg)}
|
|
46
52
|
/* Modifier: invertiert auf dunklem Bereichs-Band (z. B. .ep-cta-band) — kombiniert mit .btn-co/.btn-ki/.btn-es/.btn-wo. Background wird weiß, Text trägt die Bereichsfarbe. */
|
|
47
53
|
.btn-on-band{--c500:#fff;--c50:rgba(255,255,255,.1)}
|
|
48
54
|
.btn-co.btn-on-band{color:var(--co-700)}
|
package/css/dark-mode.css
CHANGED
|
@@ -280,6 +280,12 @@
|
|
|
280
280
|
[data-theme="dark"] .btn-ki.btn-filled:not(.btn-on-band) { background: var(--ki-300) }
|
|
281
281
|
[data-theme="dark"] .btn-es.btn-filled:not(.btn-on-band) { background: var(--es-300) }
|
|
282
282
|
[data-theme="dark"] .btn-wo.btn-filled:not(.btn-on-band) { background: var(--wo-300) }
|
|
283
|
+
/* Dark-only: Allein trägt .btn-err.btn-filled schon die Inversion (Fläche --c500 = --c-error #FFA5A5,
|
|
284
|
+
Text n-900 aus der Regel oben ✓ 10,3:1, Fläche auf bg-page 9,3:1). Sitzt zusätzlich eine
|
|
285
|
+
Bereichsklasse am Button, setzt deren Regel die Fläche auf -300 und der Button verliert den Ton
|
|
286
|
+
❌ → hier zurück auf --c-error ✓. Steht hinter den Bereichsregeln, damit bei gleicher Spezifität
|
|
287
|
+
der Ton gewinnt. (Light: dunkle Fläche #9B2020 + Weiß 8,01:1, dort regelt das components.css.) */
|
|
288
|
+
[data-theme="dark"] .btn-err.btn-filled:not(.btn-on-band) { background: var(--c-error) }
|
|
283
289
|
/* --c-ink = Bereichs-Light-Tint für Text/Rahmen der nicht-gefüllten Buttons im Dark. Dieselben Töne
|
|
284
290
|
wie t-Utilities, Badges, Icons, Eyebrows (auf der offiziellen Skala) statt eines off-scale color-mix → alle
|
|
285
291
|
Bereichstöne der Seite ziehen aus EINER Skala. */
|
|
@@ -287,6 +293,10 @@
|
|
|
287
293
|
[data-theme="dark"] .btn-ki { --c-ink: var(--ki-200) }
|
|
288
294
|
[data-theme="dark"] .btn-es { --c-ink: var(--es-100) }
|
|
289
295
|
[data-theme="dark"] .btn-wo { --c-ink: var(--wo-200) }
|
|
296
|
+
/* Dark-only: Ohne eigenen --c-ink erbte .btn-err den Bereichston der Umgebung oder gar keinen
|
|
297
|
+
(Outlined/Text ohne Bereichsklasse ❌ kein Wert) → --c-error ✓ 6,93:1 auf bg-surface, 9,32:1 auf
|
|
298
|
+
bg-page, 6,4:1 auf der Tonal-Fläche. (Light: --c500 = #9B2020 direkt, 8,01:1.) */
|
|
299
|
+
[data-theme="dark"] .btn-err { --c-ink: var(--c-error) }
|
|
290
300
|
/* Tonal im Dark: dezent brand-getönte Fläche (c500 18% in bg-page) + neutraler Rahmen über
|
|
291
301
|
--bd-strong-c (vorher als #9DA8B6 hartkodiert, dem alten --bd-strong-Wert; die Gleichung stimmte
|
|
292
302
|
nach der Flächen-Umstellung nicht mehr). Auf den vier Tonal-Füllungen 3,64:1 (ki) bis 4,87:1 (es),
|
package/dist/conciso-ds.css
CHANGED
|
@@ -526,6 +526,12 @@
|
|
|
526
526
|
[data-theme="dark"] .btn-ki.btn-filled:not(.btn-on-band) { background: var(--ki-300) }
|
|
527
527
|
[data-theme="dark"] .btn-es.btn-filled:not(.btn-on-band) { background: var(--es-300) }
|
|
528
528
|
[data-theme="dark"] .btn-wo.btn-filled:not(.btn-on-band) { background: var(--wo-300) }
|
|
529
|
+
/* Dark-only: Allein trägt .btn-err.btn-filled schon die Inversion (Fläche --c500 = --c-error #FFA5A5,
|
|
530
|
+
Text n-900 aus der Regel oben ✓ 10,3:1, Fläche auf bg-page 9,3:1). Sitzt zusätzlich eine
|
|
531
|
+
Bereichsklasse am Button, setzt deren Regel die Fläche auf -300 und der Button verliert den Ton
|
|
532
|
+
❌ → hier zurück auf --c-error ✓. Steht hinter den Bereichsregeln, damit bei gleicher Spezifität
|
|
533
|
+
der Ton gewinnt. (Light: dunkle Fläche #9B2020 + Weiß 8,01:1, dort regelt das components.css.) */
|
|
534
|
+
[data-theme="dark"] .btn-err.btn-filled:not(.btn-on-band) { background: var(--c-error) }
|
|
529
535
|
/* --c-ink = Bereichs-Light-Tint für Text/Rahmen der nicht-gefüllten Buttons im Dark. Dieselben Töne
|
|
530
536
|
wie t-Utilities, Badges, Icons, Eyebrows (auf der offiziellen Skala) statt eines off-scale color-mix → alle
|
|
531
537
|
Bereichstöne der Seite ziehen aus EINER Skala. */
|
|
@@ -533,6 +539,10 @@
|
|
|
533
539
|
[data-theme="dark"] .btn-ki { --c-ink: var(--ki-200) }
|
|
534
540
|
[data-theme="dark"] .btn-es { --c-ink: var(--es-100) }
|
|
535
541
|
[data-theme="dark"] .btn-wo { --c-ink: var(--wo-200) }
|
|
542
|
+
/* Dark-only: Ohne eigenen --c-ink erbte .btn-err den Bereichston der Umgebung oder gar keinen
|
|
543
|
+
(Outlined/Text ohne Bereichsklasse ❌ kein Wert) → --c-error ✓ 6,93:1 auf bg-surface, 9,32:1 auf
|
|
544
|
+
bg-page, 6,4:1 auf der Tonal-Fläche. (Light: --c500 = #9B2020 direkt, 8,01:1.) */
|
|
545
|
+
[data-theme="dark"] .btn-err { --c-ink: var(--c-error) }
|
|
536
546
|
/* Tonal im Dark: dezent brand-getönte Fläche (c500 18% in bg-page) + neutraler Rahmen über
|
|
537
547
|
--bd-strong-c (vorher als #9DA8B6 hartkodiert, dem alten --bd-strong-Wert; die Gleichung stimmte
|
|
538
548
|
nach der Flächen-Umstellung nicht mehr). Auf den vier Tonal-Füllungen 3,64:1 (ki) bis 4,87:1 (es),
|
|
@@ -1323,6 +1333,12 @@ body{font-family:var(--font);font-size:1rem;line-height:1.7;color:var(--tx-prima
|
|
|
1323
1333
|
.btn-ki {--c500:var(--ki-800);--c50:var(--ki-50)}
|
|
1324
1334
|
.btn-es {--c500:var(--es-700);--c50:var(--es-50)}
|
|
1325
1335
|
.btn-wo {--c500:var(--wo-700);--c50:var(--wo-50)}
|
|
1336
|
+
/* Ton-Modifier: destruktive Aktion, die sich nicht rückgängig machen lässt (Löschen, Verwerfen).
|
|
1337
|
+
Setzt dieselben zwei Tokens wie die Bereichsklassen und steht deshalb hinter ihnen: Trägt ein
|
|
1338
|
+
Button beide Klassen, gewinnt der Ton. Kombinierbar mit jeder Stil-Variante, gedacht für Filled,
|
|
1339
|
+
Outlined und Text. Light: Weiß auf --c-error 8,01:1, --c-error auf bg-page 8,01:1, Tonal-Text auf
|
|
1340
|
+
--c-error-bg 4,99:1. Dark-Werte in dark-mode.css. */
|
|
1341
|
+
.btn-err {--c500:var(--c-error);--c50:var(--c-error-bg)}
|
|
1326
1342
|
/* Modifier: invertiert auf dunklem Bereichs-Band (z. B. .ep-cta-band) — kombiniert mit .btn-co/.btn-ki/.btn-es/.btn-wo. Background wird weiß, Text trägt die Bereichsfarbe. */
|
|
1327
1343
|
.btn-on-band{--c500:#fff;--c50:rgba(255,255,255,.1)}
|
|
1328
1344
|
.btn-co.btn-on-band{color:var(--co-700)}
|
package/icons/README.md
CHANGED
|
@@ -7,7 +7,9 @@ neue/geänderte Icons in `icons/source/` ablegen und `npm run build:icons` ausf
|
|
|
7
7
|
## Inhalt
|
|
8
8
|
|
|
9
9
|
- `icons/icons.json` — Map `key → { name, area, style, viewBox, strokeWidth?, body, svg, usage? }`
|
|
10
|
-
- `icons/icons.js` — derselbe Datensatz als ESM
|
|
10
|
+
- `icons/icons.js` — derselbe Datensatz als ESM: **ein benannter Export pro Icon** (camelCase,
|
|
11
|
+
z. B. `uiShieldCheck`) **plus** das aggregierte `icons`-Objekt (Key → Eintrag)
|
|
12
|
+
- `icons/icons.d.ts` — Typdeklaration zu `icons/icons.js` (benannte Exporte + `icons`, je `CdsIconEntry`)
|
|
11
13
|
- `icons/source/*.svg` — die einzelnen normalisierten Quell-SVGs (Dateiname = Key)
|
|
12
14
|
|
|
13
15
|
## Konventionen
|
|
@@ -20,15 +22,37 @@ neue/geänderte Icons in `icons/source/` ablegen und `npm run build:icons` ausf
|
|
|
20
22
|
`color` (z. B. `color: var(--ki-800)` bzw. im Dark `--ki-200`). Keine hartkodierten Hex-Werte.
|
|
21
23
|
- **Self-contained:** Outline-Icons tragen ihre `stroke-width` inline → `set:html` funktioniert ohne
|
|
22
24
|
Wrapper-Annahmen über den Stil. Größe via `width`/`height` oder CSS (viewBox bleibt erhalten).
|
|
23
|
-
- **Keys:** `{area}-{name}` für die Bereichs-Glyphen (`co|ki|es|wo`), `ui-{name}` für bereichsneutrale
|
|
25
|
+
- **Keys:** `{area}-{name}` für die Bereichs-Glyphen (`co|ki|es|wo`), `ui-{name}` für bereichsneutrale
|
|
26
|
+
Icons. Jeder Key hat einen benannten Export in camelCase (Bindestrich-Segment groß:
|
|
27
|
+
`ui-caret-down` → `uiCaretDown`, `co-building` → `coBuilding`); der Generator bricht bei einer
|
|
28
|
+
Kollision oder einem ungültigen JS-Bezeichner ab.
|
|
24
29
|
|
|
25
30
|
## Verwendung
|
|
26
31
|
|
|
32
|
+
**Empfohlen: benannter Import.** Nur benannte Imports sind tree-shakable — jeder Export ist ein
|
|
33
|
+
eigenes `const` auf Modulebene ohne Property-Zugriff oder Funktionsaufruf, Bundler (Webpack,
|
|
34
|
+
Rollup, esbuild, Angular/Vite) lassen dadurch jedes nicht importierte Icon aus dem Bundle.
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
import { uiShieldCheck } from '@conciso/design-system/icons';
|
|
38
|
+
|
|
39
|
+
uiShieldCheck.svg // komplettes <svg>…</svg> (currentColor, self-contained)
|
|
40
|
+
uiShieldCheck.body // nur das innere Markup (für set:html in ein bestehendes <svg>)
|
|
41
|
+
uiShieldCheck.style // "outline"
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Aggregat `icons` / `icons.json`: nur für Kataloge und Doku.** `import { icons } from
|
|
45
|
+
'@conciso/design-system/icons'` oder der Import von `icons.json` liefert alle 99 Icons in einem
|
|
46
|
+
Objekt — praktisch für eine Icon-Galerie oder einen dynamischen Lookup per String-Key, zieht dabei
|
|
47
|
+
aber immer die komplette Bibliothek ins Bundle, auch wenn nur ein Icon benutzt wird. In Apps daher
|
|
48
|
+
immer den benannten Import verwenden; `icons`/`icons.json` bleiben Kataloge/Doku (z. B. die
|
|
49
|
+
Storybook-Icon-Galerie) vorbehalten.
|
|
50
|
+
|
|
27
51
|
```js
|
|
28
52
|
import { icons } from '@conciso/design-system/icons';
|
|
29
53
|
// oder: import iconsJson from '@conciso/design-system/icons.json' assert { type: 'json' };
|
|
30
54
|
|
|
31
|
-
const shield = icons['ui-shield-check'];
|
|
55
|
+
const shield = icons['ui-shield-check']; // äquivalent zu uiShieldCheck oben, aber nicht tree-shakable
|
|
32
56
|
shield.svg // komplettes <svg>…</svg> (currentColor, self-contained)
|
|
33
57
|
shield.body // nur das innere Markup (für set:html in ein bestehendes <svg>)
|
|
34
58
|
shield.style // "outline"
|
|
@@ -38,8 +62,8 @@ shield.style // "outline"
|
|
|
38
62
|
|
|
39
63
|
```astro
|
|
40
64
|
---
|
|
41
|
-
import {
|
|
42
|
-
const { svg } =
|
|
65
|
+
import { kiBot } from '@conciso/design-system/icons';
|
|
66
|
+
const { svg } = kiBot;
|
|
43
67
|
---
|
|
44
68
|
<span class="icon" set:html={svg} />
|
|
45
69
|
<style>.icon { color: var(--ki-800); display: inline-flex; }
|
|
@@ -63,124 +87,124 @@ Karten. Das Marken-Glyph ist dem Verweis auf den Bereich selbst vorbehalten.
|
|
|
63
87
|
|
|
64
88
|
### Corporate
|
|
65
89
|
|
|
66
|
-
| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
67
|
-
|
|
68
|
-
| `co-building` | Corporate / Unternehmen – Bereichs-Glyphe (Gebäude) | solid | icon-size-swatch @co |
|
|
69
|
-
| `co-mark` | Corporate – Logo-Zeichen „C.“ (nur mit Logo verwenden) | solid | icon-size-swatch @co |
|
|
90
|
+
| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
91
|
+
|---|---|---|---|---|
|
|
92
|
+
| `co-building` | `coBuilding` | Corporate / Unternehmen – Bereichs-Glyphe (Gebäude) | solid | icon-size-swatch @co |
|
|
93
|
+
| `co-mark` | `coMark` | Corporate – Logo-Zeichen „C.“ (nur mit Logo verwenden) | solid | icon-size-swatch @co |
|
|
70
94
|
|
|
71
95
|
### Angewandte KI
|
|
72
96
|
|
|
73
|
-
| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
74
|
-
|
|
75
|
-
| `ki-bot` | Angewandte KI – Bereichs-Glyphe (Tablet/Bot) | solid | icon-size-swatch @ki, ep-card-icon t-ki @ki |
|
|
97
|
+
| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
98
|
+
|---|---|---|---|---|
|
|
99
|
+
| `ki-bot` | `kiBot` | Angewandte KI – Bereichs-Glyphe (Tablet/Bot) | solid | icon-size-swatch @ki, ep-card-icon t-ki @ki |
|
|
76
100
|
|
|
77
101
|
### Effektive Software
|
|
78
102
|
|
|
79
|
-
| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
80
|
-
|
|
81
|
-
| `es-window-check` | Effektive Software – Bereichs-Glyphe (Fenster + Check) | solid | icon-size-swatch @es, ep-card-icon t-es @es |
|
|
103
|
+
| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
104
|
+
|---|---|---|---|---|
|
|
105
|
+
| `es-window-check` | `esWindowCheck` | Effektive Software – Bereichs-Glyphe (Fenster + Check) | solid | icon-size-swatch @es, ep-card-icon t-es @es |
|
|
82
106
|
|
|
83
107
|
### Wirksame Organisationen
|
|
84
108
|
|
|
85
|
-
| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
86
|
-
|
|
87
|
-
| `wo-network` | Wirksame Organisationen – Bereichs-Glyphe (Netzwerk) | solid | icon-size-swatch @wo, ep-card-icon t-wo @wo |
|
|
109
|
+
| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
110
|
+
|---|---|---|---|---|
|
|
111
|
+
| `wo-network` | `woNetwork` | Wirksame Organisationen – Bereichs-Glyphe (Netzwerk) | solid | icon-size-swatch @wo, ep-card-icon t-wo @wo |
|
|
88
112
|
|
|
89
113
|
### Bereichsneutral (UI)
|
|
90
114
|
|
|
91
|
-
| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
92
|
-
|
|
93
|
-
| `ui-academic-cap` | Doktorhut / Lernen | outline | ep-feature-icon @co |
|
|
94
|
-
| `ui-adjustments-horizontal` | Regler / Einstellungen | outline (1.25) | ep-card-icon @ki |
|
|
95
|
-
| `ui-arrow-down-tray-2` | Download (Outline-Variante) | outline (1.5) | docs-nav (cta) |
|
|
96
|
-
| `ui-arrow-down-tray` | Download | solid | cta-dl-icon @ki |
|
|
97
|
-
| `ui-arrow-path` | Aktualisieren / Kreislauf | outline (1.25) | ep-card-icon @wo |
|
|
98
|
-
| `ui-arrow-trending-up` | Trend aufwärts | outline (1.25) | ep-card-icon @ki |
|
|
99
|
-
| `ui-banknotes` | Geldscheine | outline | ep-feature-icon @co |
|
|
100
|
-
| `ui-bars-3-center-left` | Balken, mittlere Zeile kurz und linksbündig (Footer) | outline (1.5) | docs-nav (footer) |
|
|
101
|
-
| `ui-bars-3` | Balken (Hamburger-Navigation) | outline (1.5) | docs-nav (navigation) |
|
|
102
|
-
| `ui-bolt-2` | Blitz (Variante) | outline (1.25) | card-media @es |
|
|
103
|
-
| `ui-bolt` | Blitz | outline (1.25) | ep-card-icon @co, ep-card-icon @ki |
|
|
104
|
-
| `ui-book-open` | Aufgeschlagenes Buch / Quellen | outline (1.5) | docs-nav (sources) |
|
|
105
|
-
| `ui-briefcase-2` | Aktenkoffer (Variante) | outline | ep-section |
|
|
106
|
-
| `ui-briefcase` | Aktenkoffer | outline (1.25) | ep-card-icon @co |
|
|
107
|
-
| `ui-building-office` | Bürogebäude | outline (1.5) | ep-tl-icon |
|
|
108
|
-
| `ui-calendar-days` | Kalender (Tage) | outline (1.25) | ep-card-icon @co, col-3, stoerer-icon (Veranstaltung) |
|
|
109
|
-
| `ui-calendar` | Kalender | outline (1) | card-meta |
|
|
110
|
-
| `ui-caret-down` | Caret nach unten (Nav-Toggle) | outline | ep-tab-toggle, ep-nav-btn ep-nav-item-toggle, ep-nav-btn ep-nav-item-toggle t-co |
|
|
111
|
-
| `ui-chart-bar` | Balkendiagramm | outline | ep-feature-icon @co |
|
|
112
|
-
| `ui-chat-bubble-left-right` | Chat-Blasen (Dialog) | outline (1.5) | ep-feature-icon, ep-feature-icon @ki |
|
|
113
|
-
| `ui-chat-bubble-oval-left-ellipsis` | Chat-Blase oval mit Auslassungspunkten | outline (1.5) | docs-nav (feedback) |
|
|
114
|
-
| `ui-chat-bubble-oval` | Chat-Blase (oval) | outline (1.25) | ep-card-icon @ki |
|
|
115
|
-
| `ui-check-badge` | Verifiziert-Abzeichen | solid | — |
|
|
116
|
-
| `ui-check-circle-2` | Häkchen im Kreis (Variante) | outline (1.5) | — |
|
|
117
|
-
| `ui-check-circle` | Häkchen im Kreis | outline | — |
|
|
118
|
-
| `ui-check` | Häkchen (klein) | outline | — |
|
|
119
|
-
| `ui-chevron-down` | Chevron nach unten (FAQ/Akkordeon) | outline (1.25) | ep-faq, ep-faq-a, ep-compare-summary, article-toc-summary |
|
|
120
|
-
| `ui-chevron-up-down` | Chevron auf/ab (Dropdown-Toggle) | outline (1.5) | docs-nav (dropdowns) |
|
|
121
|
-
| `ui-circle-stack` | Datenbank / Stapel | outline (1.25) | card-media @es |
|
|
122
|
-
| `ui-clock` | Uhr | outline | ep-feature-icon @co |
|
|
123
|
-
| `ui-code-bracket-2` | Code-Klammern (Variante) | outline (1.25) | ep-card-icon @es |
|
|
124
|
-
| `ui-code-bracket-square` | Code-Klammern im Quadrat | outline (1.5) | docs-nav (code) |
|
|
125
|
-
| `ui-code-bracket` | Code-Klammern | outline | — |
|
|
126
|
-
| `ui-cog-6tooth` | Zahnrad (6 Zähne) | outline (1.5) | ep-feature-icon @ki |
|
|
127
|
-
| `ui-cog` | Zahnrad | outline (1.25) | ep-card-icon @ki |
|
|
128
|
-
| `ui-computer-desktop` | Desktop-Rechner / Hero | outline (1.5) | docs-nav (hero) |
|
|
129
|
-
| `ui-cpu-chip-2` | CPU / Chip (Variante) | outline (1.5) | ep-feature-icon |
|
|
130
|
-
| `ui-cpu-chip` | CPU / Chip | outline (1.25) | ep-card-icon @ki |
|
|
131
|
-
| `ui-cube-2` | Würfel (Variante) | outline (1.5) | ep-feature-icon @ki |
|
|
132
|
-
| `ui-cube-transparent` | Würfel transparent / Design Tokens | outline (1.5) | docs-nav (tokens) |
|
|
133
|
-
| `ui-cube` | Würfel / Box | outline (1.25) | ep-card-icon @ki |
|
|
134
|
-
| `ui-currency-euro` | Euro | outline (1.25) | col-3 |
|
|
135
|
-
| `ui-cursor-arrow-rays` | Cursor mit Strahlen / Interaktion | outline (1.5) | docs-nav (buttons) |
|
|
136
|
-
| `ui-device-phone-mobile` | Mobilgerät / Responsive | outline (1.5) | docs-nav (responsive) |
|
|
137
|
-
| `ui-document-text` | Dokument mit Text / Wissensbeitrag | outline (1.5) | docs-nav (article) |
|
|
138
|
-
| `ui-face-smile` | Smiley / Icons | outline (1.5) | docs-nav (icons) |
|
|
139
|
-
| `ui-flag` | Fahne / Markenrad | outline (1.5) | docs-nav (brand) |
|
|
140
|
-
| `ui-folder` | Ordner | outline (1.25) | ep-card-icon @co |
|
|
141
|
-
| `ui-hand-raised` | Erhobene Hand | outline (1.25) | ep-card-icon @co |
|
|
142
|
-
| `ui-heart` | Herz | outline | ep-feature-icon @co |
|
|
143
|
-
| `ui-information-circle` | Info im Kreis | outline (1.25) | stoerer-icon (Info) |
|
|
144
|
-
| `ui-language` | Sprache / Typografie | outline (1.5) | docs-nav (typography) |
|
|
145
|
-
| `ui-link` | Kettenglied / Link | outline (1.5) | ep-feature-icon @ki |
|
|
146
|
-
| `ui-list-bullet` | Aufzählungsliste | outline | — |
|
|
147
|
-
| `ui-lock-closed-2` | Schloss (Variante) | outline (1.25) | ep-card-icon @ki |
|
|
148
|
-
| `ui-lock-closed` | Schloss geschlossen | outline (1.5) | ep-feature-icon |
|
|
149
|
-
| `ui-magnifying-glass` | Lupe | outline (1.25) | ep-card-icon @ki |
|
|
150
|
-
| `ui-map-pin-2` | Standort-Pin (Variante) | outline (1.25) | col-3 |
|
|
151
|
-
| `ui-map-pin` | Standort-Pin | outline (1) | — |
|
|
152
|
-
| `ui-megaphone` | Megafon / Verlautbarung | outline (1.25) | stoerer-icon (Pressemitteilung) |
|
|
153
|
-
| `ui-newspaper-2` | Zeitung / Artikel (Variante) | outline (1.5) | docs-nav (listing), docs-nav (events) |
|
|
154
|
-
| `ui-newspaper` | Zeitung / Artikel | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, stoerer-icon (Wissensbeitrag) |
|
|
155
|
-
| `ui-pause` | Pause | solid | logo-carousel-pause |
|
|
156
|
-
| `ui-pencil-square` | Stift im Quadrat / Bearbeiten | outline (1.5) | docs-nav (inputs) |
|
|
157
|
-
| `ui-photo` | Foto / Bildsprache | outline (1.5) | docs-nav (imagery) |
|
|
158
|
-
| `ui-play` | Play | solid | icon-pause |
|
|
159
|
-
| `ui-puzzle-piece` | Puzzleteil | outline (1.5) | ep-tl-icon |
|
|
160
|
-
| `ui-quote` | Zitatzeichen (Team-Stimme) | solid | team-voice-body @co |
|
|
161
|
-
| `ui-rectangle-stack` | Rechteck-Stapel / Cards | outline (1.5) | docs-nav (cards) |
|
|
162
|
-
| `ui-rocket-launch` | Rakete | outline (1.5) | ep-tl-icon |
|
|
163
|
-
| `ui-shield-check-2` | Schild mit Häkchen (Variante) | outline | ep-feature-icon @co |
|
|
164
|
-
| `ui-shield-check` | Schild mit Häkchen | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, ep-card-icon @es |
|
|
165
|
-
| `ui-sparkles-2` | Funkeln (Variante) | outline (1.5) | ep-feature-icon @ki |
|
|
166
|
-
| `ui-sparkles-3` | Funkeln (Variante) | outline (1.25) | card-media @es |
|
|
167
|
-
| `ui-sparkles-4` | Funkeln (Variante, drei Strahlen) | outline (1.5) | docs-nav (brand) |
|
|
168
|
-
| `ui-sparkles` | Funkeln / Sparkles | outline (1.25) | ep-card-icon @ki |
|
|
169
|
-
| `ui-square-2-stack` | Quadrate gestapelt / Slider | outline (1.5) | docs-nav (slider) |
|
|
170
|
-
| `ui-squares-2x2` | Raster 2×2 | outline (1.25) | ep-card-icon @ki, ep-card-icon @es |
|
|
171
|
-
| `ui-squares-plus` | Module / Raster+ | outline (1.25) | ep-card-icon @wo |
|
|
172
|
-
| `ui-star-2` | Stern (Variante) | outline | — |
|
|
173
|
-
| `ui-star` | Stern | outline (1.5) | ep-tl-icon |
|
|
174
|
-
| `ui-sun` | Sonne / Theme-Umschalter | outline (1.5) | docs-nav (theme) |
|
|
175
|
-
| `ui-swatch` | Farbfeld / Swatch | outline (1.5) | ep-tl-icon |
|
|
176
|
-
| `ui-table-cells` | Tabellenzellen | outline (1.5) | docs-nav (table) |
|
|
177
|
-
| `ui-tag` | Preisschild / Tag | outline (1.5) | docs-nav (chips), docs-nav (leistung-detail) |
|
|
178
|
-
| `ui-trophy-2` | Pokal (Variante) | outline | — |
|
|
179
|
-
| `ui-trophy` | Pokal | outline (1.5) | ep-tl-icon |
|
|
180
|
-
| `ui-user-group-2` | Personengruppe (Variante) | outline | ep-feature-icon @co |
|
|
181
|
-
| `ui-user-group` | Personengruppe (3) | outline (1.25) | ep-card-icon @co, ep-card-icon @wo, col-3 |
|
|
182
|
-
| `ui-users-2` | Personen (Variante) | outline | — |
|
|
183
|
-
| `ui-users` | Personen (2) | outline (1) | — |
|
|
184
|
-
| `ui-viewfinder-circle` | Sucher / Fokus | outline (1.25) | ep-card-icon @co |
|
|
185
|
-
| `ui-window` | Browserfenster / Beispielseiten | outline (1.5) | docs-nav (examples) |
|
|
186
|
-
| `ui-wrench-screwdriver` | Werkzeug (Schlüssel + Schraubendreher) | outline (1.25) | ep-card-icon @co |
|
|
115
|
+
| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
|
|
116
|
+
|---|---|---|---|---|
|
|
117
|
+
| `ui-academic-cap` | `uiAcademicCap` | Doktorhut / Lernen | outline | ep-feature-icon @co |
|
|
118
|
+
| `ui-adjustments-horizontal` | `uiAdjustmentsHorizontal` | Regler / Einstellungen | outline (1.25) | ep-card-icon @ki |
|
|
119
|
+
| `ui-arrow-down-tray-2` | `uiArrowDownTray2` | Download (Outline-Variante) | outline (1.5) | docs-nav (cta) |
|
|
120
|
+
| `ui-arrow-down-tray` | `uiArrowDownTray` | Download | solid | cta-dl-icon @ki |
|
|
121
|
+
| `ui-arrow-path` | `uiArrowPath` | Aktualisieren / Kreislauf | outline (1.25) | ep-card-icon @wo |
|
|
122
|
+
| `ui-arrow-trending-up` | `uiArrowTrendingUp` | Trend aufwärts | outline (1.25) | ep-card-icon @ki |
|
|
123
|
+
| `ui-banknotes` | `uiBanknotes` | Geldscheine | outline | ep-feature-icon @co |
|
|
124
|
+
| `ui-bars-3-center-left` | `uiBars3CenterLeft` | Balken, mittlere Zeile kurz und linksbündig (Footer) | outline (1.5) | docs-nav (footer) |
|
|
125
|
+
| `ui-bars-3` | `uiBars3` | Balken (Hamburger-Navigation) | outline (1.5) | docs-nav (navigation) |
|
|
126
|
+
| `ui-bolt-2` | `uiBolt2` | Blitz (Variante) | outline (1.25) | card-media @es |
|
|
127
|
+
| `ui-bolt` | `uiBolt` | Blitz | outline (1.25) | ep-card-icon @co, ep-card-icon @ki |
|
|
128
|
+
| `ui-book-open` | `uiBookOpen` | Aufgeschlagenes Buch / Quellen | outline (1.5) | docs-nav (sources) |
|
|
129
|
+
| `ui-briefcase-2` | `uiBriefcase2` | Aktenkoffer (Variante) | outline | ep-section |
|
|
130
|
+
| `ui-briefcase` | `uiBriefcase` | Aktenkoffer | outline (1.25) | ep-card-icon @co |
|
|
131
|
+
| `ui-building-office` | `uiBuildingOffice` | Bürogebäude | outline (1.5) | ep-tl-icon |
|
|
132
|
+
| `ui-calendar-days` | `uiCalendarDays` | Kalender (Tage) | outline (1.25) | ep-card-icon @co, col-3, stoerer-icon (Veranstaltung) |
|
|
133
|
+
| `ui-calendar` | `uiCalendar` | Kalender | outline (1) | card-meta |
|
|
134
|
+
| `ui-caret-down` | `uiCaretDown` | Caret nach unten (Nav-Toggle) | outline | ep-tab-toggle, ep-nav-btn ep-nav-item-toggle, ep-nav-btn ep-nav-item-toggle t-co |
|
|
135
|
+
| `ui-chart-bar` | `uiChartBar` | Balkendiagramm | outline | ep-feature-icon @co |
|
|
136
|
+
| `ui-chat-bubble-left-right` | `uiChatBubbleLeftRight` | Chat-Blasen (Dialog) | outline (1.5) | ep-feature-icon, ep-feature-icon @ki |
|
|
137
|
+
| `ui-chat-bubble-oval-left-ellipsis` | `uiChatBubbleOvalLeftEllipsis` | Chat-Blase oval mit Auslassungspunkten | outline (1.5) | docs-nav (feedback) |
|
|
138
|
+
| `ui-chat-bubble-oval` | `uiChatBubbleOval` | Chat-Blase (oval) | outline (1.25) | ep-card-icon @ki |
|
|
139
|
+
| `ui-check-badge` | `uiCheckBadge` | Verifiziert-Abzeichen | solid | — |
|
|
140
|
+
| `ui-check-circle-2` | `uiCheckCircle2` | Häkchen im Kreis (Variante) | outline (1.5) | — |
|
|
141
|
+
| `ui-check-circle` | `uiCheckCircle` | Häkchen im Kreis | outline | — |
|
|
142
|
+
| `ui-check` | `uiCheck` | Häkchen (klein) | outline | — |
|
|
143
|
+
| `ui-chevron-down` | `uiChevronDown` | Chevron nach unten (FAQ/Akkordeon) | outline (1.25) | ep-faq, ep-faq-a, ep-compare-summary, article-toc-summary |
|
|
144
|
+
| `ui-chevron-up-down` | `uiChevronUpDown` | Chevron auf/ab (Dropdown-Toggle) | outline (1.5) | docs-nav (dropdowns) |
|
|
145
|
+
| `ui-circle-stack` | `uiCircleStack` | Datenbank / Stapel | outline (1.25) | card-media @es |
|
|
146
|
+
| `ui-clock` | `uiClock` | Uhr | outline | ep-feature-icon @co |
|
|
147
|
+
| `ui-code-bracket-2` | `uiCodeBracket2` | Code-Klammern (Variante) | outline (1.25) | ep-card-icon @es |
|
|
148
|
+
| `ui-code-bracket-square` | `uiCodeBracketSquare` | Code-Klammern im Quadrat | outline (1.5) | docs-nav (code) |
|
|
149
|
+
| `ui-code-bracket` | `uiCodeBracket` | Code-Klammern | outline | — |
|
|
150
|
+
| `ui-cog-6tooth` | `uiCog6tooth` | Zahnrad (6 Zähne) | outline (1.5) | ep-feature-icon @ki |
|
|
151
|
+
| `ui-cog` | `uiCog` | Zahnrad | outline (1.25) | ep-card-icon @ki |
|
|
152
|
+
| `ui-computer-desktop` | `uiComputerDesktop` | Desktop-Rechner / Hero | outline (1.5) | docs-nav (hero) |
|
|
153
|
+
| `ui-cpu-chip-2` | `uiCpuChip2` | CPU / Chip (Variante) | outline (1.5) | ep-feature-icon |
|
|
154
|
+
| `ui-cpu-chip` | `uiCpuChip` | CPU / Chip | outline (1.25) | ep-card-icon @ki |
|
|
155
|
+
| `ui-cube-2` | `uiCube2` | Würfel (Variante) | outline (1.5) | ep-feature-icon @ki |
|
|
156
|
+
| `ui-cube-transparent` | `uiCubeTransparent` | Würfel transparent / Design Tokens | outline (1.5) | docs-nav (tokens) |
|
|
157
|
+
| `ui-cube` | `uiCube` | Würfel / Box | outline (1.25) | ep-card-icon @ki |
|
|
158
|
+
| `ui-currency-euro` | `uiCurrencyEuro` | Euro | outline (1.25) | col-3 |
|
|
159
|
+
| `ui-cursor-arrow-rays` | `uiCursorArrowRays` | Cursor mit Strahlen / Interaktion | outline (1.5) | docs-nav (buttons) |
|
|
160
|
+
| `ui-device-phone-mobile` | `uiDevicePhoneMobile` | Mobilgerät / Responsive | outline (1.5) | docs-nav (responsive) |
|
|
161
|
+
| `ui-document-text` | `uiDocumentText` | Dokument mit Text / Wissensbeitrag | outline (1.5) | docs-nav (article) |
|
|
162
|
+
| `ui-face-smile` | `uiFaceSmile` | Smiley / Icons | outline (1.5) | docs-nav (icons) |
|
|
163
|
+
| `ui-flag` | `uiFlag` | Fahne / Markenrad | outline (1.5) | docs-nav (brand) |
|
|
164
|
+
| `ui-folder` | `uiFolder` | Ordner | outline (1.25) | ep-card-icon @co |
|
|
165
|
+
| `ui-hand-raised` | `uiHandRaised` | Erhobene Hand | outline (1.25) | ep-card-icon @co |
|
|
166
|
+
| `ui-heart` | `uiHeart` | Herz | outline | ep-feature-icon @co |
|
|
167
|
+
| `ui-information-circle` | `uiInformationCircle` | Info im Kreis | outline (1.25) | stoerer-icon (Info) |
|
|
168
|
+
| `ui-language` | `uiLanguage` | Sprache / Typografie | outline (1.5) | docs-nav (typography) |
|
|
169
|
+
| `ui-link` | `uiLink` | Kettenglied / Link | outline (1.5) | ep-feature-icon @ki |
|
|
170
|
+
| `ui-list-bullet` | `uiListBullet` | Aufzählungsliste | outline | — |
|
|
171
|
+
| `ui-lock-closed-2` | `uiLockClosed2` | Schloss (Variante) | outline (1.25) | ep-card-icon @ki |
|
|
172
|
+
| `ui-lock-closed` | `uiLockClosed` | Schloss geschlossen | outline (1.5) | ep-feature-icon |
|
|
173
|
+
| `ui-magnifying-glass` | `uiMagnifyingGlass` | Lupe | outline (1.25) | ep-card-icon @ki |
|
|
174
|
+
| `ui-map-pin-2` | `uiMapPin2` | Standort-Pin (Variante) | outline (1.25) | col-3 |
|
|
175
|
+
| `ui-map-pin` | `uiMapPin` | Standort-Pin | outline (1) | — |
|
|
176
|
+
| `ui-megaphone` | `uiMegaphone` | Megafon / Verlautbarung | outline (1.25) | stoerer-icon (Pressemitteilung) |
|
|
177
|
+
| `ui-newspaper-2` | `uiNewspaper2` | Zeitung / Artikel (Variante) | outline (1.5) | docs-nav (listing), docs-nav (events) |
|
|
178
|
+
| `ui-newspaper` | `uiNewspaper` | Zeitung / Artikel | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, stoerer-icon (Wissensbeitrag) |
|
|
179
|
+
| `ui-pause` | `uiPause` | Pause | solid | logo-carousel-pause |
|
|
180
|
+
| `ui-pencil-square` | `uiPencilSquare` | Stift im Quadrat / Bearbeiten | outline (1.5) | docs-nav (inputs) |
|
|
181
|
+
| `ui-photo` | `uiPhoto` | Foto / Bildsprache | outline (1.5) | docs-nav (imagery) |
|
|
182
|
+
| `ui-play` | `uiPlay` | Play | solid | icon-pause |
|
|
183
|
+
| `ui-puzzle-piece` | `uiPuzzlePiece` | Puzzleteil | outline (1.5) | ep-tl-icon |
|
|
184
|
+
| `ui-quote` | `uiQuote` | Zitatzeichen (Team-Stimme) | solid | team-voice-body @co |
|
|
185
|
+
| `ui-rectangle-stack` | `uiRectangleStack` | Rechteck-Stapel / Cards | outline (1.5) | docs-nav (cards) |
|
|
186
|
+
| `ui-rocket-launch` | `uiRocketLaunch` | Rakete | outline (1.5) | ep-tl-icon |
|
|
187
|
+
| `ui-shield-check-2` | `uiShieldCheck2` | Schild mit Häkchen (Variante) | outline | ep-feature-icon @co |
|
|
188
|
+
| `ui-shield-check` | `uiShieldCheck` | Schild mit Häkchen | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, ep-card-icon @es |
|
|
189
|
+
| `ui-sparkles-2` | `uiSparkles2` | Funkeln (Variante) | outline (1.5) | ep-feature-icon @ki |
|
|
190
|
+
| `ui-sparkles-3` | `uiSparkles3` | Funkeln (Variante) | outline (1.25) | card-media @es |
|
|
191
|
+
| `ui-sparkles-4` | `uiSparkles4` | Funkeln (Variante, drei Strahlen) | outline (1.5) | docs-nav (brand) |
|
|
192
|
+
| `ui-sparkles` | `uiSparkles` | Funkeln / Sparkles | outline (1.25) | ep-card-icon @ki |
|
|
193
|
+
| `ui-square-2-stack` | `uiSquare2Stack` | Quadrate gestapelt / Slider | outline (1.5) | docs-nav (slider) |
|
|
194
|
+
| `ui-squares-2x2` | `uiSquares2x2` | Raster 2×2 | outline (1.25) | ep-card-icon @ki, ep-card-icon @es |
|
|
195
|
+
| `ui-squares-plus` | `uiSquaresPlus` | Module / Raster+ | outline (1.25) | ep-card-icon @wo |
|
|
196
|
+
| `ui-star-2` | `uiStar2` | Stern (Variante) | outline | — |
|
|
197
|
+
| `ui-star` | `uiStar` | Stern | outline (1.5) | ep-tl-icon |
|
|
198
|
+
| `ui-sun` | `uiSun` | Sonne / Theme-Umschalter | outline (1.5) | docs-nav (theme) |
|
|
199
|
+
| `ui-swatch` | `uiSwatch` | Farbfeld / Swatch | outline (1.5) | ep-tl-icon |
|
|
200
|
+
| `ui-table-cells` | `uiTableCells` | Tabellenzellen | outline (1.5) | docs-nav (table) |
|
|
201
|
+
| `ui-tag` | `uiTag` | Preisschild / Tag | outline (1.5) | docs-nav (chips), docs-nav (leistung-detail) |
|
|
202
|
+
| `ui-trophy-2` | `uiTrophy2` | Pokal (Variante) | outline | — |
|
|
203
|
+
| `ui-trophy` | `uiTrophy` | Pokal | outline (1.5) | ep-tl-icon |
|
|
204
|
+
| `ui-user-group-2` | `uiUserGroup2` | Personengruppe (Variante) | outline | ep-feature-icon @co |
|
|
205
|
+
| `ui-user-group` | `uiUserGroup` | Personengruppe (3) | outline (1.25) | ep-card-icon @co, ep-card-icon @wo, col-3 |
|
|
206
|
+
| `ui-users-2` | `uiUsers2` | Personen (Variante) | outline | — |
|
|
207
|
+
| `ui-users` | `uiUsers` | Personen (2) | outline (1) | — |
|
|
208
|
+
| `ui-viewfinder-circle` | `uiViewfinderCircle` | Sucher / Fokus | outline (1.25) | ep-card-icon @co |
|
|
209
|
+
| `ui-window` | `uiWindow` | Browserfenster / Beispielseiten | outline (1.5) | docs-nav (examples) |
|
|
210
|
+
| `ui-wrench-screwdriver` | `uiWrenchScrewdriver` | Werkzeug (Schlüssel + Schraubendreher) | outline (1.25) | ep-card-icon @co |
|
package/icons/icons.d.ts
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
// Generiert von scripts/build-icons.mjs — NICHT manuell editieren.
|
|
2
|
+
// Typdeklaration für icons/icons.js. Siehe icons/README.md „Verwendung“.
|
|
3
|
+
|
|
4
|
+
export interface CdsIconEntry {
|
|
5
|
+
name: string;
|
|
6
|
+
area: string;
|
|
7
|
+
style: 'solid' | 'outline' | 'mixed';
|
|
8
|
+
viewBox: string;
|
|
9
|
+
strokeWidth?: string;
|
|
10
|
+
/** Nur das innere Markup (für set:html in ein bestehendes <svg>). */
|
|
11
|
+
body: string;
|
|
12
|
+
/** Komplettes <svg>…</svg> (currentColor, self-contained). */
|
|
13
|
+
svg: string;
|
|
14
|
+
usage?: string[];
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const coBuilding: CdsIconEntry;
|
|
18
|
+
export const coMark: CdsIconEntry;
|
|
19
|
+
export const esWindowCheck: CdsIconEntry;
|
|
20
|
+
export const kiBot: CdsIconEntry;
|
|
21
|
+
export const uiAcademicCap: CdsIconEntry;
|
|
22
|
+
export const uiAdjustmentsHorizontal: CdsIconEntry;
|
|
23
|
+
export const uiArrowDownTray2: CdsIconEntry;
|
|
24
|
+
export const uiArrowDownTray: CdsIconEntry;
|
|
25
|
+
export const uiArrowPath: CdsIconEntry;
|
|
26
|
+
export const uiArrowTrendingUp: CdsIconEntry;
|
|
27
|
+
export const uiBanknotes: CdsIconEntry;
|
|
28
|
+
export const uiBars3CenterLeft: CdsIconEntry;
|
|
29
|
+
export const uiBars3: CdsIconEntry;
|
|
30
|
+
export const uiBolt2: CdsIconEntry;
|
|
31
|
+
export const uiBolt: CdsIconEntry;
|
|
32
|
+
export const uiBookOpen: CdsIconEntry;
|
|
33
|
+
export const uiBriefcase2: CdsIconEntry;
|
|
34
|
+
export const uiBriefcase: CdsIconEntry;
|
|
35
|
+
export const uiBuildingOffice: CdsIconEntry;
|
|
36
|
+
export const uiCalendarDays: CdsIconEntry;
|
|
37
|
+
export const uiCalendar: CdsIconEntry;
|
|
38
|
+
export const uiCaretDown: CdsIconEntry;
|
|
39
|
+
export const uiChartBar: CdsIconEntry;
|
|
40
|
+
export const uiChatBubbleLeftRight: CdsIconEntry;
|
|
41
|
+
export const uiChatBubbleOvalLeftEllipsis: CdsIconEntry;
|
|
42
|
+
export const uiChatBubbleOval: CdsIconEntry;
|
|
43
|
+
export const uiCheckBadge: CdsIconEntry;
|
|
44
|
+
export const uiCheckCircle2: CdsIconEntry;
|
|
45
|
+
export const uiCheckCircle: CdsIconEntry;
|
|
46
|
+
export const uiCheck: CdsIconEntry;
|
|
47
|
+
export const uiChevronDown: CdsIconEntry;
|
|
48
|
+
export const uiChevronUpDown: CdsIconEntry;
|
|
49
|
+
export const uiCircleStack: CdsIconEntry;
|
|
50
|
+
export const uiClock: CdsIconEntry;
|
|
51
|
+
export const uiCodeBracket2: CdsIconEntry;
|
|
52
|
+
export const uiCodeBracketSquare: CdsIconEntry;
|
|
53
|
+
export const uiCodeBracket: CdsIconEntry;
|
|
54
|
+
export const uiCog6tooth: CdsIconEntry;
|
|
55
|
+
export const uiCog: CdsIconEntry;
|
|
56
|
+
export const uiComputerDesktop: CdsIconEntry;
|
|
57
|
+
export const uiCpuChip2: CdsIconEntry;
|
|
58
|
+
export const uiCpuChip: CdsIconEntry;
|
|
59
|
+
export const uiCube2: CdsIconEntry;
|
|
60
|
+
export const uiCubeTransparent: CdsIconEntry;
|
|
61
|
+
export const uiCube: CdsIconEntry;
|
|
62
|
+
export const uiCurrencyEuro: CdsIconEntry;
|
|
63
|
+
export const uiCursorArrowRays: CdsIconEntry;
|
|
64
|
+
export const uiDevicePhoneMobile: CdsIconEntry;
|
|
65
|
+
export const uiDocumentText: CdsIconEntry;
|
|
66
|
+
export const uiFaceSmile: CdsIconEntry;
|
|
67
|
+
export const uiFlag: CdsIconEntry;
|
|
68
|
+
export const uiFolder: CdsIconEntry;
|
|
69
|
+
export const uiHandRaised: CdsIconEntry;
|
|
70
|
+
export const uiHeart: CdsIconEntry;
|
|
71
|
+
export const uiInformationCircle: CdsIconEntry;
|
|
72
|
+
export const uiLanguage: CdsIconEntry;
|
|
73
|
+
export const uiLink: CdsIconEntry;
|
|
74
|
+
export const uiListBullet: CdsIconEntry;
|
|
75
|
+
export const uiLockClosed2: CdsIconEntry;
|
|
76
|
+
export const uiLockClosed: CdsIconEntry;
|
|
77
|
+
export const uiMagnifyingGlass: CdsIconEntry;
|
|
78
|
+
export const uiMapPin2: CdsIconEntry;
|
|
79
|
+
export const uiMapPin: CdsIconEntry;
|
|
80
|
+
export const uiMegaphone: CdsIconEntry;
|
|
81
|
+
export const uiNewspaper2: CdsIconEntry;
|
|
82
|
+
export const uiNewspaper: CdsIconEntry;
|
|
83
|
+
export const uiPause: CdsIconEntry;
|
|
84
|
+
export const uiPencilSquare: CdsIconEntry;
|
|
85
|
+
export const uiPhoto: CdsIconEntry;
|
|
86
|
+
export const uiPlay: CdsIconEntry;
|
|
87
|
+
export const uiPuzzlePiece: CdsIconEntry;
|
|
88
|
+
export const uiQuote: CdsIconEntry;
|
|
89
|
+
export const uiRectangleStack: CdsIconEntry;
|
|
90
|
+
export const uiRocketLaunch: CdsIconEntry;
|
|
91
|
+
export const uiShieldCheck2: CdsIconEntry;
|
|
92
|
+
export const uiShieldCheck: CdsIconEntry;
|
|
93
|
+
export const uiSparkles2: CdsIconEntry;
|
|
94
|
+
export const uiSparkles3: CdsIconEntry;
|
|
95
|
+
export const uiSparkles4: CdsIconEntry;
|
|
96
|
+
export const uiSparkles: CdsIconEntry;
|
|
97
|
+
export const uiSquare2Stack: CdsIconEntry;
|
|
98
|
+
export const uiSquares2x2: CdsIconEntry;
|
|
99
|
+
export const uiSquaresPlus: CdsIconEntry;
|
|
100
|
+
export const uiStar2: CdsIconEntry;
|
|
101
|
+
export const uiStar: CdsIconEntry;
|
|
102
|
+
export const uiSun: CdsIconEntry;
|
|
103
|
+
export const uiSwatch: CdsIconEntry;
|
|
104
|
+
export const uiTableCells: CdsIconEntry;
|
|
105
|
+
export const uiTag: CdsIconEntry;
|
|
106
|
+
export const uiTrophy2: CdsIconEntry;
|
|
107
|
+
export const uiTrophy: CdsIconEntry;
|
|
108
|
+
export const uiUserGroup2: CdsIconEntry;
|
|
109
|
+
export const uiUserGroup: CdsIconEntry;
|
|
110
|
+
export const uiUsers2: CdsIconEntry;
|
|
111
|
+
export const uiUsers: CdsIconEntry;
|
|
112
|
+
export const uiViewfinderCircle: CdsIconEntry;
|
|
113
|
+
export const uiWindow: CdsIconEntry;
|
|
114
|
+
export const uiWrenchScrewdriver: CdsIconEntry;
|
|
115
|
+
export const woNetwork: CdsIconEntry;
|
|
116
|
+
|
|
117
|
+
export const icons: Record<string, CdsIconEntry>;
|
|
118
|
+
export default icons;
|