SvgIcon Demo

SvgIcon

Rendert SVG-Icons inline aus der OoSvgIcons-Bibliothek – kein HTTP-Request, typsicher, beliebig skalierbar. Neue Icons einfach als Konstante in OoSvgIcons.cs ergänzen.

Alle Icons

Aufruf: <SvgIcon Svg="@OoSvgIcons.Dateitypen.Pdf" /> – Größe via Size oder IconSize. Neue Konstanten in OoSvgIcons.cs erscheinen hier automatisch.

Dateitypen

Blank

Excel

Jpg

Movie

Outlook

Pdf

PowerPoint

Svg

Txt

Word

Word2

Zip

Größen via `Size`

Skalierung über den Size-Parameter (OoSize).

Inline in Text

SvgIcon fügt sich als Inline-Element in Fließtext ein.

Das Dokument wird als Word-Datei gespeichert oder als exportiert.

Hover-Effekte

Da SVG-Farben als fill-Attribute eingebettet sind, funktioniert color nicht. Die Lösung ist CSS filter – direkt als Parameter HoverEffect am SvgIcon setzen.

Brighten Aufhellen

Dim Abdunkeln

Lift Anheben

Colorize Grau → Farbe

Eigene Effekte weiterhin via class oder style möglich. Vom Elternelement:
.mein-button:hover .oo-svgicon { filter: brightness(1.3); }

In Buttons

SvgIcon als ChildContent im Button – kombiniert mit Text oder allein als Icon-Button.

In SmartLinks

SvgIcon als ChildContent im SmartLink – als normaler Link oder mit Button-Styling.

PDF-Dokumentation

Word öffnen

Excel öffnen

In Badges & Text-Kombinationen

SvgIcon neben Text in Cards, Labels und sonstigen Layouts.

Jahresbericht.pdf 2,4 MB · PDF

Daten.xlsx 512 KB · Excel

Backup.zip 18 MB · Archiv

Neues Icon hinzufügen

So einfach geht es:

SVG-Markup kopieren (z.B. von SimpleIcons, Material Symbols, eigene Vektoren).
In OoSvgIcons.cs eine neue public const string anlegen –
in einer bestehenden Kategorie-Klasse oder einer neuen static class.
Verwenden: <SvgIcon Svg="@OoSvgIcons.MeineKategorie.MeinIcon" />

SKILL.md – Svgicon

---
name: SvgIcon
description: Onesown Blazor Komponente SvgIcon (Common). Verwende diesen Skill wenn du die SvgIcon-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# SvgIcon

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Common  
**Basisklasse:** `OoComponentBase`  

Rendert ein SVG-Icon inline aus der -Bibliothek.

**Live-Demo:** https://components.schini.com/demo/svgicon  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``IconSize`` | ``string`` |  | Optionale feste Breite/Höhe in CSS-Einheiten, z.B. "2rem" oder "48px". Standardmäßig erbt das Icon die Schriftgröße des Elternelements (1em × 1em). |
| ``HoverEffect`` | ``SvgIconHoverEffect`` | ``SvgIconHoverEffect.None`` | Optionaler Hover-Effekt. Alle Varianten basieren auf CSS filter und funktionieren unabhängig von den eingebetteten SVG-Farben. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Verwendung: <c>&lt;SvgIcon Svg="@OoSvgIcons.Dateitypen.Pdf" /&gt;</c>
- Größe: über den <c>Size</c>-Parameter (oo-size-xs … oo-size-xl) oder per Inline-<c>style</c>.
- Das SVG-Markup wird direkt ins DOM gerendert (kein HTTP-Request).
- Barrierefreiheit: <c>aria-hidden="true"</c> wird automatisch gesetzt; mit <c>aria-label</c> überschreiben.
- Hover-Effekte: <c>HoverEffect="SvgIconHoverEffect.Lift"</c> etc.