@conciso/design-system 2.1.0 → 2.1.1

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.
Files changed (5) hide show
  1. package/README.md +31 -24
  2. package/icons/README.md +138 -114
  3. package/icons/icons.d.ts +118 -0
  4. package/icons/icons.js +1356 -1150
  5. 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 aus GitHub Packages** (der empfohlene Weg):
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
- import { icons } from '@conciso/design-system/icons';
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)), liegt aber weiterhin in GitHub Packages statt der
70
- > öffentlichen npm-Registry — GitHub Packages verlangt daher Auth auch fürs Lesen (lokal
71
- > ein Token mit Scope `read:packages` als `GITHUB_TOKEN`, in GitHub Actions genügt
72
- > `secrets.GITHUB_TOKEN`). Details in [Getting Started](docs/GETTING-STARTED.md#1-einbinden),
73
- > Begründung in [ADR-0004](docs/adr/0004-verteilung-und-versionierung.md). Ohne npm bleibt
74
- > Variante A (Vendoren von `dist/conciso-ds.css` + `fonts/`) der schlankeste Weg.
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
- > Der Lese-Auth-Zwang gilt damit nur wegen der **Registry**, nicht wegen der Lizenz, und
77
- > betrifft nur das **Paket** selbst. Die **Doku** (Storybook, die Komponenten-Referenz der
78
- > Angular-Lib) ist dagegen öffentlich einsehbar unter
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 derselben Registry, im Lockstep auf derselben Version.
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/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 (`import { icons } from '@conciso/design-system/icons'`)
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 Icons.
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 { icons } from '@conciso/design-system/icons';
42
- const { svg } = icons['ki-bot'];
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;