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

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

Usage

Direkter Import (empfohlen — Tree-Shaking)

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)

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

// 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:

.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".