# pd-icon-brands

Tree-shakeable Social Media & Brand Icons für die PD Web Components Library.

Jedes Icon ist ein Lit `SVGTemplateResult` mit `viewBox="0 0 24 24"` und `fill="currentColor"`.
Größe und Farbe werden über das Elternelement gesteuert.

## Installation

```bash
pnpm add @progressive-development/pd-icon-brands
```

## Usage

### Direkter Import (empfohlen — Tree-Shaking)

```typescript
import { linkedinIcon, githubIcon } from "@progressive-development/pd-icon-brands";
import { html, css, LitElement } from "lit";

// Im Template
html`
  <a href="https://linkedin.com/in/..." class="social-link" aria-label="LinkedIn">
    ${linkedinIcon}
  </a>
  <a href="https://github.com/..." class="social-link" aria-label="GitHub">
    ${githubIcon}
  </a>
`;
```

Nur die importierten Icons landen im Bundle — alle anderen werden vom Bundler entfernt.

### Dynamischer Lookup (wenn Icon-Name aus Config kommt)

```typescript
import { brandIconMap, type BrandIconName } from "@progressive-development/pd-icon-brands";

// z.B. in pd-socialmedia oder Footer-Links
const iconName: BrandIconName = "linkedin";
const icon = brandIconMap.get(iconName);

html`${icon ? html`<span class="social-icon">${icon}</span>` : nothing}`;
```

**Hinweis:** `brandIconMap` importiert alle Icons. Für Apps mit nur 2–3 Social-Icons ist der direkte Import performanter.

### Einzelner Icon-Import

```typescript
// Nur ein Icon importieren
import { linkedinIcon } from "@progressive-development/pd-icon-brands/icons/linkedin";
```

## Styling

Die Icons nutzen `fill="currentColor"` — die Farbe wird vom CSS des Elternelements geerbt:

```css
.social-link {
  color: var(--pd-default-col);      /* Icon-Farbe */
  width: 24px;                        /* Icon-Größe */
  height: 24px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.social-link:hover {
  color: var(--pd-secondary-col);
}

.social-link svg {
  width: 100%;
  height: 100%;
}
```

## Verfügbare Icons

| Export | Name | Plattform |
|--------|------|-----------|
| `linkedinIcon` | `linkedin` | LinkedIn |
| `githubIcon` | `github` | GitHub |
| `xTwitterIcon` | `x-twitter` | X (ehem. Twitter) |
| `instagramIcon` | `instagram` | Instagram |
| `facebookIcon` | `facebook` | Facebook |
| `youtubeIcon` | `youtube` | YouTube |
| `tiktokIcon` | `tiktok` | TikTok |
| `xingIcon` | `xing` | Xing |
| `whatsappIcon` | `whatsapp` | WhatsApp |
| `telegramIcon` | `telegram` | Telegram |
| `stackoverflowIcon` | `stackoverflow` | Stack Overflow |
| `dribbbleIcon` | `dribbble` | Dribbble |
| `behanceIcon` | `behance` | Behance |

## Neues Icon hinzufügen

1. Neue Datei `src/icons/<name>.ts` anlegen (Muster: bestehende Icons)
2. In `src/icons/index.ts` exportieren
3. In `src/index.ts` exportieren
4. In `src/brand-icon-map.ts` zur Map hinzufügen + `BrandIconName` Type erweitern

**Konvention:** Alle SVGs nutzen `viewBox="0 0 24 24"`, `fill="currentColor"`, `aria-hidden="true"`.