# IT Lab Icons

Eine flexible und typsichere Icon-Bibliothek für Vue 3, die die offiziellen Icons des IT Lab Hubs bündelt und zusätzlich allgemeine statische und dynamische Icons bereitstellt.
Alle Icons sind als Vue-Komponenten verfügbar und können direkt in Templates verwendet werden.

---

![NPM version](https://img.shields.io/npm/v/itlab-icons?style=flat&label=Version)

![NPM downloads](https://img.shields.io/npm/dm/itlab-icons?style=flat&label=Downloads)

![NPM updated](https://img.shields.io/npm/last-update/itlab-icons?style=flat&label=Updated)

## Installation

```bash
pnpm add itlab-icons
```

<Callout>Die Bibliothek ist vollständig tree-shakeable – es werden nur die Icons in das Bundle aufgenommen, die auch tatsächlich importiert werden.</Callout>

## Verwendung

### Einfaches Beispiel

```vue
<template>
  <PersonIcon />
</template>

<script setup lang="ts">
import { PersonIcon } from 'itlab-icons';
</script>
```

- Alle Icons sind standardmäßig SVG-basierte Vue-Komponenten.
- Props wie `class`, `style`, `width`, oder `height` können direkt wie bei jeder Vue-Komponente gesetzt werden.

### Props-Weitergabe

Da Icons reguläre Komponenten sind, lassen sie sich mit dynamischen Klassen und Styles kombinieren:

```vue
<template>
  <PersonIcon class="h-6 w-6 text-gray-600" />
</template>
```

## Icon-Arten

Die Bibliothek unterscheidet zwischen drei Icon-Gruppen:

- [**App Icons:**](./app-icons) Logos der IT Lab Hub Dienste (z. B. `AppNewsroomIcon`, `AppEventsicons`).
- [**Static Icons:**](./static-icons) Statische Symbole, ohne Props (z. B. `PersonIcon`, `EllipsisIcon`).
- [**Dynamic Icons:**](./dynamic-icons) Symbole, die über Props konfigurierbar sind.
  Aktuell verfügbar:
  - `DocExtensionIcon` → rendert dynamisch ein Dokument-Icon basierend auf der `extension: string` Prop. Darunter wird die Extension als Text angezeigt.

## Utilities

### `createStyledIconRenderer`

Eine Utility-Funktion zum Erstellen wiederverwendbarer, gestylter Icon-Renderer.

```ts
/**
 * Factory function that creates a Vue render function for an icon with custom styles applied.
 *
 * This function helps separate the creation of a styled icon renderer from the actual rendering process,
 * allowing reusable, configurable icon renderers to be easily composed.
 *
 * @param {Icon} icon - The icon component to be rendered.
 * @param {CSSProperties} style - CSS styles to apply to the icon.
 * @returns {() => VNode<RendererNode, RendererElement, Record<string, any>>} A Vue render function producing the styled icon vnode.
 */
export function createStyledIconRenderer(
  icon: Icon,
  style: CSSProperties,
): () => VNode<RendererNode, RendererElement, { [key: string]: any }> {
  // Return a function that Vue will call to render the icon with the provided styles
  return () => h<Icon>(icon, { style: style });
}
```

**Beispiel**

```ts
import { createStyledIconRenderer, PersonFillIcon } from 'itlab-icons';

const RedPersonFillIcon = createStyledIconRenderer(PersonFillIcon, { color: 'red' });
```

### `createColoredIconRenderer`

Eine spezialisierte Version von `createStyledIconRenderer`, wenn nur die Farbe angepasst werden soll.

```ts
/**
 * Factory function that creates a Vue render function for an icon with a specified color.
 *
 * This is a specialized helper built on top of createStyledIconRenderer to quickly produce
 * an icon renderer with only a color style applied.
 *
 * @param {Icon} icon - The icon component to be rendered.
 * @param {string} color - The color to apply to the icon.
 * @returns {() => VNode<RendererNode, RendererElement, Record<string, any>>} A Vue render function producing the colorized icon vnode.
 */
function createColoredIconRenderer(
  icon: Icon,
  color: string,
): () => VNode<RendererNode, RendererElement, { [key: string]: any }>;
```

**Beispiel**

```ts
import { createStyledIconRenderer, PersonFillIcon } from 'itlab-icons';

const RedPersonFillIcon = createColoredIconRenderer(PersonFillIcon, 'red');
```

## Typen

### `Icon`

Die Bibliothek stellt den Typ `Icon` bereit, um Icons typsicher als Props oder Parameter zu verwenden.

```ts
import { type Icon, PersonIcon } from 'itlab-icons';

const icon: Icon = PersonIcon;
```

**Beispiel**

```vue
<template>
  <component :is="icon" class="h-6 w-6" />
</template>

<script setup lang="ts">
import type { Icon } from 'itlab-icons';

defineProps<{
  icon: Icon;
}>();
</script>
```