# Icons > Die Bibliothek Icons: der Katalog Fluent UI System Icons und Ihre eigenen SVG-Icons, die Suche nach Name oder Schlagwort, der Inspektor, ein Icon aus SVG-Markup anlegen und bearbeiten, was die Bereinigung behält und entfernt, und wo ein Icon verwendet wird. **Icons** ist die zweite Kategorie unter der Wurzel Assets: jedes Zeichen des Katalogs Fluent UI System Icons, den das Produkt mitbringt, dazu die Icons, die Sie aus SVG-Markup zusammensetzen. Der Bereich trägt die Überschrift "Icon-Katalog", die Zeile "Der vollständige Katalog der Fluent UI System Icons plus unbedenkliche eigene SVG-Icons des Bedieners." und die Pille mit der Anzahl. Zum Lesen ist **Logic anzeigen** nötig; eigene Icons anlegen, bearbeiten und löschen brauchen **Logic konfigurieren**. ## Der Katalog {#the-catalog} Über den Karten: **Suchen** ("Bezeichnung oder Stichwort"), **Herkunft** und **Pro Seite**. Die Suche trifft ohne Rücksicht auf Groß- und Kleinschreibung den Namen jedes Icons und die Schlagwörter eines Katalogzeichens (ein Zeichen wird auch über ein Schlagwort gefunden, das nicht in seinem Namen steht); jeder Tastendruck baut die Liste ab ihrer ersten Seite neu auf und verwirft eine Auswahl, die die Liste nicht mehr zeigt. Die Karten zeigen das Zeichen, den Namen und die Herkunft (**System** bei einem Katalogzeichen, **Eigene** bei Ihren); ein leeres Ergebnis sagt "Kein Icon passt zu diesen Filtern." mit **Filter zurücksetzen**. Der Katalog ist nach Namen sortiert; teilt eines Ihrer Icons das Segment mit einem Katalogzeichen, werden beide Karten aufgeführt, und an der Adresse gewinnt Ihres. ## Der Inspektor {#the-inspector} | Zeile | Was sie zeigt | | --- | --- | | Das Zeichen | Gezeichnet mit 112 px | | Adresse | `Assets.Icons.` | | Herkunft | Fluent UI System Icons oder Meine Bibliothek | | Format | Mitgeliefertes Zeichen oder bereinigtes SVG | | Schlagwörter | Bei einem Katalogzeichen die Wörter, die die Suche über den Namen hinaus trifft | Ein Katalogzeichen zeigt "Systemicons sind nur lesbar." Ihr Icon bietet einer konfigurierenden Rolle **Bearbeiten** und **Löschen**. ## Neues eigenes Icon {#new-user-icon} Der Befehl über der Zeile Icons öffnet "Neues eigenes Icon" anstelle des Rasters ("Legen Sie ein adressierbares Icon aus unbewegtem SVG-Markup an."). | Feld | Was es ist | Werte / Standard | Wirkung | | --- | --- | --- | --- | | Name | Der angezeigte Name; sein Segment ist die Adresse. | Pflichtfeld, anfangs leer. | Die Adresse, die Dashboards und Variablen halten. Bearbeiten benennt sie später um, und jeder Verweis auf die alte Adresse zieht mit. | | SVG-Markup | Das Markup des Icons, als Text eingefügt. | Pflichtfeld; der Platzhalter zeigt `…`. | Wird beim Tippen bereinigt; die Vorschau rechts zeigt das bereinigte Ergebnis mit 112 px oder "Eine unbedenkliche Vorschau erscheint, sobald das SVG gültig ist." | Eine Fehlerzeile unter den Feldern sagt, was fehlt ("Eine Bezeichnung und SVG-Markup sind erforderlich.", "Ein Name ist erforderlich.") oder was die Bereinigung abgelehnt hat; **Icon anlegen** bleibt ausgegraut, bis beide Felder gültig sind. **Abbrechen** oder **Zurück** verlässt die Ansicht, ohne etwas anzulegen. Bei Erfolg wird die Karte sichtbar gemacht (Such- und Herkunftsfilter werden zurückgesetzt, wenn sie sie verbergen würden), und das Aktionsprotokoll sagt "Icon angelegt." ### Was die Bereinigung behält und ablehnt {#what-the-sanitizer-keeps-and-refuses} Das Markup eines Icons ist ein geprüftes Datenformat, nie ausführbarer Inhalt. Die Bereinigung behält unbewegtes SVG: `svg`, `g`, `defs`, `symbol`, `use`, die Formen (`path`, `rect`, `circle`, `ellipse`, `line`, `polyline`, `polygon`), `text` und `tspan`, `title` und `desc`, Verläufe und `stop`, `pattern`, `mask`, `clipPath` und `marker`, mit ihren Attributen für Geometrie, Farbgebung und Text, ein `style`-Attribut, das auf dieselben Eigenschaften beschränkt ist, sowie interne Verweise (`href="#id"`, `url(#id)`). Sie entfernt alles andere: die Elemente `script` und `style`, `foreignObject`, Ereignisattribute, externe und `data:`-URLs, unbekannte Attribute, ungültige IDs und Verweise auf IDs, die es nicht gibt. Das Entfernen wird nicht gemeldet: Der Icon-Editor zeigt nur die bereinigte Vorschau, ohne eine Zeile mit Reparaturen, und das Icon wird als das bereinigte Markup gespeichert. Nur der [Import eines Symbols](assets-symbols#import-symbol) zählt die Reparaturen, die er vornimmt. Sie lehnt Markup rundweg ab, das leer ist, kein wohlgeformtes XML ist, keine ``-Wurzel hat, größer als 512 KB ist, mehr als 4096 Elemente hat oder eine doppelte ID trägt. Die Vorschau zeigt nie unbereinigtes Markup, und ein gespeichertes Icon wird bei jedem Lesen erneut bereinigt. ## Bearbeiten {#edit} Bearbeiten öffnet "`` Bearbeiten" ("Die Umbenennung wird mit der Eingabetaste gespeichert oder wenn das Feld den Fokus verliert, und nimmt die Verweise mit; gültige SVG-Änderungen werden automatisch gespeichert."): ein Feld **Bezeichnung**, das ein Umbenennungsfeld ist, und darunter das Markup. Während Sie einen Namen tippen, zeigt eine Zeile die Auswirkung ("Beim Umbenennen werden die 2 Stellen aktualisiert, die diese Adresse lesen.", "Kein Verweis nutzt die aktuelle Adresse." oder "Die wirksame Adresse ändert sich nicht; es müssen keine Verweise aktualisiert werden.", wenn der neue Name auf dasselbe Segment bereinigt wird). Die Eingabetaste oder das Verlassen des Feldes übernimmt: Das Icon behält seine ID und sein Markup, jeder verwurzelte Verweis auf die alte Adresse wird umgeschrieben, und das Aktionsprotokoll sagt "Icon umbenannt und N Verweise aktualisiert." Ein bereits vergebener Name wird unter dem Feld abgelehnt. Eine gültige Änderung am Markup wird eine halbe Sekunde nach dem letzten Tastendruck gespeichert ("Icon gespeichert."); ein ungültiger Entwurf wird nicht gespeichert und sagt, warum. **Zurück** führt zum Katalog und behält das letzte gültige Markup. ## Löschen {#delete} **Löschen** fragt "'X' löschen? Verweise auf seine Adresse werden unauflösbar. Das lässt sich nicht rückgängig machen." Eine Variable, die diese Adresse zurückgibt, löst dann ins Leere auf, was die [Validierung](validation) auflistet. Das Aktionsprotokoll sagt "Icon gelöscht." ## Wo ein Icon verwendet wird {#where-an-icon-is-used} Eine [Variable](logic-variables#output-types) mit Ausgabe Icon gibt `Assets.Icons.` zurück, und die verknüpfte Dashboard-Komponente [Icon](component-icon) zeichnet es: ein Katalogzeichen als Zeichen der Schriftart, Ihr Icon als sein Markup. ## Was die Bibliothek nicht tut {#what-the-library-does-not-do} Sie importiert keine SVG-Datei (fügen Sie das Markup ein), versieht Ihre Icons nicht mit Schlagwörtern, färbt sie nicht ein (die Komponente, die ein Icon zeichnet, entscheidet über seine Farbe), bearbeitet oder verbirgt kein Katalogzeichen und exportiert nicht.