@mmg-dev/webpipeline-icons-svg

Optimierte SVG-Dateien aus der webpipeline-icons-Monorepo — generiert aus Figma-Exporten via SVGO.

Installation

pnpm i -D @mmg-dev/webpipeline-icons-svg

Hinweis: Die Beispiele verwenden pnpm. Alternativ funktionieren npm oder yarn analog (npm i -D, yarn add -D).

Verwendung

Die optimierten SVG-Dateien liegen im Verzeichnis icons/ und können direkt verwendet werden.

Per <img>-Tag (kein currentColor-Support):

<img src="path/to/icons/navigation-arrow-down.svg" alt="" width="24" height="24" />

Inline (Icon erbt die Textfarbe via currentColor):

<span style="color: #e60000;">
  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
    <path d="M20.368 12.383..." />
  </svg>
</span>

Farbe per CSS ändern:

Da alle SVGs mit fill="currentColor" optimiert sind, reicht die CSS-Property color — das SVG erbt die Textfarbe automatisch:

<svg class="icon-danger" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
  <path d="M20.368 12.383..." />
</svg>

.icon-danger {
  color: #e60000;
}

Alternativ kann fill direkt gesetzt werden (überschreibt currentColor):

<svg class="icon-brand" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
  <path d="M20.368 12.383..." />
</svg>

.icon-brand {
  fill: #0066cc;
}

SVG-Optimierung (SVGO)

Die Optimierung transformiert Figma-Exporte in produktionsreife SVGs:

• Entfernt Figma-Metadaten und überflüssige Attribute
• Root-<svg> erhält fill="currentColor"; bei Kind-Elementen werden explizite Fills entfernt (außer fill="none"), sodass die Textfarbe geerbt wird — unabhängig vom Farbwert in der Quelle
• Entfernt feste width/height (Größe per CSS/Props steuerbar)
• Behält viewBox="0 0 24 24"
• Setzt aria-hidden="true" als Default
• Normalisiert Dateinamen: Umlaute (ä→ae, ü→ue, ö→oe, ß→ss), Underscores → Hyphens, Lowercase

Accessibility

• Dekorativ (Default): aria-hidden="true" — Icon wird von Screen Readern ignoriert
• Semantisch: role="img" und aria-label oder <title> hinzufügen, wenn das Icon alleinstehend Bedeutung trägt

Naming

| Kontext | Format | Beispiel | | --------------- | -------------------- | --------------------------- | | Quell-SVG | Kategorie_Name.svg | Navigation_Arrow_Down.svg | | Optimiertes SVG | kebab-case.svg | navigation-arrow-down.svg |