Icons

Die Icon-Verwaltung bündelt die serverseitigen Standard-Icons und deine eigenen Custom Icons. Diese Icons kannst du anschließend bei Creator Links und passenden Page-Elementen auswählen.

Bereiche

Bereich	Beschreibung
SVG Import	Zeigt, wie viel SVG-Speicher für Custom SVG Icons genutzt wird.
Suche	Filtert Icons nach Name, Key oder Quelle.
Quelle	Filtert nach `All`, `Lucide`, `Bootstrap` oder `Custom`.
Plus Button	Öffnet das Formular zum Hinzufügen eines eigenen Icons.
Icon Grid	Zeigt alle verfügbaren Icons.
Custom Icons	Deine eigenen Icons. Sie sind im Grid markiert und haben ein `X` zum Löschen.

Server-Icons Und Custom Icons

Die Icon Library besteht aus zwei Arten von Icons.

Typ	Bedeutung
Serverseitige Icons	Standard-Icons, die KALYIX bereitstellt. Sie kommen aus Lucide oder Bootstrap und können nicht gelöscht werden.
Custom Icons	Icons, die du selbst hinzufügst. Diese Icons sind im Grid markiert und haben oben rechts ein `X`, mit dem du sie löschen kannst.

Serverseitige Icons sind direkt verfügbar. Custom Icons werden pro Tipp-Profil gespeichert und stehen danach in der Icon-Auswahl zur Verfügung.

Suche Und Quelle

Feld	Bedeutung
Suche	Sucht nach Icon-Name, Key oder Quelle. Beispiele: `youtube`, `wallet`, `bootstrap`, `custom`.
Quelle	Grenzt die Liste auf `All`, `Lucide`, `Bootstrap` oder `Custom` ein.
Plus Button	Öffnet `Icon hinzufügen`.

Icon Hinzufügen

Über den Plus Button öffnest du das Formular Icon hinzufügen.

Feld	Bedeutung
Quelle	Wählt, ob du ein Lucide Icon, ein Bootstrap Icon oder ein Custom SVG Icon hinzufügen willst.
Key	Technischer Schlüssel für dein Icon. KALYIX normalisiert den Key in Kleinbuchstaben und erlaubt Buchstaben, Zahlen, `_` und `-`.
Name	Sichtbarer Name des Icons in der Library.
Icon Name	Nur bei Lucide oder Bootstrap. Hier trägst du den Namen des Icons aus der jeweiligen Library ein.
SVG HTML	Nur bei Custom SVG. Hier fügst du das komplette `<svg ...>...</svg>` Markup ein.

Lucide Icons

Lucide Icons findest du unter lucide.dev/icons .

Für Lucide trägst du den angezeigten Icon-Namen ein. Der Name kann im Kebab-Format aus der Lucide-Seite kommen, zum Beispiel play-circle, wallet, sparkles oder radio.

KALYIX normalisiert den Namen intern und versucht daraus die passende Lucide-Komponente zu laden.

Bootstrap Icons

Bootstrap Icons findest du unter icons.getbootstrap.com .

Für Bootstrap trägst du Bs plus den angezeigten Namen der Bootstrap-Seite ein.

Beispiele:

Bootstrap Icon	Eintrag in KALYIX
Discord	`BsDiscord`
Youtube	`BsYoutube`
Twitch	`BsTwitch`
Instagram	`BsInstagram`
Reddit	`BsReddit`

Wichtig ist das Bs am Anfang. Dadurch wird klar, dass das Icon aus Bootstrap Icons kommt.

Custom SVG Icons

Bei Custom SVG fügst du das komplette SVG-Markup ein, nicht eine URL zu einer Datei.

Richtig:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

Nicht erlaubt:

https://example.com/icon.svg
data:image/svg+xml;base64,...

SVG Sicherheit

Custom SVGs werden bereinigt und geprüft, bevor sie gespeichert werden.

Prüfung	Bedeutung
Keine externen URLs	`https:`, `data:`, `blob:` und `file:` sind nicht erlaubt.
Kein Script	`script` Tags und Event-Attribute wie `onclick` werden entfernt oder blockiert.
Keine eingebetteten Dateien	`image`, `use`, `iframe`, `object`, `embed` und ähnliche Tags sind nicht erlaubt.
Keine gefährlichen Styles	`style`, `filter`, `mask`, `clip-path`, `url(...)`, `@import` und ähnliche Inhalte sind blockiert.
Sichtbare Shapes	Das SVG muss sichtbare Elemente wie `path`, `circle`, `rect`, `line`, `polygon` oder ähnliche Shapes enthalten.
ViewBox erforderlich	Das SVG muss eine `viewBox` haben, damit es sauber skaliert.
Größenlimit	Das SVG zählt gegen das angezeigte SVG Import Limit.
Node Limit	Sehr komplexe SVGs mit zu vielen Nodes werden abgelehnt.

Dadurch können Custom SVGs als Icons genutzt werden, ohne Script- oder externe Ladepfade in die Tipp Page zu übernehmen.

Löschen

Nur Custom Icons können gelöscht werden. Sie erkennst du am X oben rechts auf der Icon-Karte.

Serverseitige Lucide- und Bootstrap-Icons haben kein X, weil sie zur festen Icon Library gehören.

Nutzung In Creator Links

Nach dem Speichern erscheint dein Custom Icon in der Icon-Auswahl der Creator Links. Dort kannst du es einem Link zuweisen und zusätzlich eine Icon-Farbe setzen.