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 "Icons", die Zeile "Der vollständige Katalog Fluent UI System Icons und sichere, vom Bediener eigene SVG-Icons." 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

Über den Karten: Suche ("Name oder Schlagwort"), 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 "Keine Icons passen 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

Ein Katalogzeichen zeigt "System-Icons sind schreibgeschützt." Ihr Icon bietet einer konfigurierenden Rolle Bearbeiten und Löschen.

Neues eigenes Icon

Der Befehl über der Zeile Icons öffnet "Neues eigenes Icon" anstelle des Rasters ("Ein adressierbares Icon aus unbewegtem SVG-Markup erzeugen.").

Eine Fehlerzeile unter den Feldern sagt, was fehlt ("Name und SVG-Markup sind erforderlich.", "Ein Name ist erforderlich.") oder was die Bereinigung abgelehnt hat; Icon erzeugen 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 erzeugt."

Was die Bereinigung behält und ablehnt

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 und meldet es als Reparatur: die Elemente script und style, foreignObject, Ereignisattribute, externe und data:-URLs, unbekannte Attribute, ungültige IDs und Verweise auf IDs, die es nicht gibt. Sie lehnt Markup rundweg ab, das leer ist, kein wohlgeformtes XML ist, keine <svg>-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

Bearbeiten öffnet "<name> 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 Name, das ein Umbenennungsfeld ist, und darunter das Markup. Während Sie einen Namen tippen, zeigt eine Zeile die Auswirkung ("Das Umbenennen aktualisiert die 2 Stellen, die diese Adresse lesen.", "Keine Verweise nutzen die aktuelle Adresse." oder "Die wirksame Adresse ändert sich nicht; kein Verweis muss 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

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 auflistet. Das Aktionsprotokoll sagt "Icon gelöscht."

Wo ein Icon verwendet wird

Eine Variable mit Ausgabe Icon gibt Assets.Icons.<name> zurück, und die verknüpfte Dashboard-Komponente Icon zeichnet es: ein Katalogzeichen als Zeichen der Schriftart, Ihr Icon als sein Markup.

Was die Bibliothek nicht tut

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.