Icons de

Icon-Ökosystem

🌐 Diese Seite auf: English · Português · Español · Français · Deutsch

eQuantic.UI stellt ein umfassendes und erweiterbares Icon-Ökosystem bereit. Es unterstützt von Haus aus mehrere verbreitete Icon-Sätze, alle über ein einheitliches Komponentenmodell eingebunden.

🚀 Schnellstart

Um Icons in deinem Projekt zu verwenden, installiere das Paket des gewünschten Icon-Satzes und das Paket der Basiskomponenten.

dotnet add package eQuantic.UI.Components
dotnet add package eQuantic.UI.Lucide

Verwendung

Nichts zu registrieren. Ein Pack ist ein Katalog von IconGlyph: du benennst die Glyphe, die du willst, und der Compiler bindet genau diese ein:

using eQuantic.UI.Lucide;

Glyph(LucideIcons.Search)
Glyph(LucideIcons.Check, size: 20)

Die Größen sind die §07-Whitelist (16 / 20 / 24 / 32). Für eine Größe außerhalb dieser Liste zeichnet Vector(glyph, size) dieselben Pfade ohne die Icon-Zusage, und Vector(glyph, size, height: h) gibt einer nicht quadratischen Figur ihr eigenes Seitenverhältnis (seit 0.2.0-preview.28; der Verbinder eines Diagramms war der Fall). Icon(...) ist die Fabrik für das kuratierte Icons-Enum des Frameworks selbst. Siehe DeclarativeSurface dazu, warum die beiden verschiedene Namen tragen.

Weil du die Glyphe benennst, löst sich nichts zur Laufzeit auf und zwei Packs können sich über einen Namen nie uneinig sein: es gibt keine Suche, die verloren gehen könnte.

Paket	Beschreibung
eQuantic.UI.Lucide	Schöne und einheitliche Icons (Standardsatz).
eQuantic.UI.Heroicons	Schöne handgefertigte SVG-Icons von den Machern von Tailwind CSS.
eQuantic.UI.RadixIcons	Ein klarer Satz von 15×15-Icons, gestaltet vom Radix-UI-Team.
eQuantic.UI.TablerIcons	Über 4200 pixelgenaue Icons für Webdesign.
eQuantic.UI.FontAwesome6.Solid	Der weltweit verbreitetste Icon-Satz (Variante Solid).
eQuantic.UI.FontAwesome6.Regular	Font-Awesome-6-Regular-Icons.
eQuantic.UI.FontAwesome6.Brands	Font-Awesome-6-Marken-Icons.
eQuantic.UI.Phosphor	Eine flexible Icon-Familie für Schnittstellen, Diagramme und mehr.
eQuantic.UI.SimpleIcons	Über 3000 SVG-Icons verbreiteter Marken.
eQuantic.UI.BootstrapIcons	Freie, hochwertige Open-Source-Icon-Bibliothek mit über 2000 Icons.
eQuantic.UI.Iconoir	Ein hochwertiger Satz von über 1500 Open-Source-Icons.
eQuantic.UI.MaterialSymbols	Googles Material Symbols: 16.284 Glyphen, das größte Pack hier.

Pack-Glyphen, write-once

Ein Icon-Paket ist ein Katalog von IconGlyph: zielneutrale Pfaddaten, also dient derselbe Eintrag dem Web-Realisierer als inline SVG und dem nativen Atlas als Glyphengeometrie. Zeichne eine mit Glyph:

using eQuantic.UI.MaterialSymbols;

Glyph(MaterialSymbolsIcons.PlayArrowRounded)
Glyph(MaterialSymbolsIcons.ExpandMore, size: 20)

Glyph, nicht Icon: Icon ist die Fabrik für das kuratierte Icons-Enum des Frameworks selbst, und die deklarative Fläche hat keine Überladungen. Siehe DeclarativeSurface. Die Größen sind die §07-Whitelist (16 / 20 / 24 / 32); für alles außerhalb zeichnet Vector(glyph, size) dieselben Pfade ohne die Icon-Zusage, und ein height:-Argument befreit die Box vom Quadrat.

Du zahlst für das, was du benennst. eqc bindet nur die Glyphen ein, die eine Seite wirklich referenziert: eine Seite, die zwei Material-Symbols-Glyphen verwendet, gibt ein Modul von 627 Byte aus, aus einem Katalog, dessen Quelle ~8 MB groß ist. Die Packgröße ist eine Kosten der Build-Zeit, kein Download.

Seit 0.2.0-preview.7

Eine Anmerkung zu Material Symbols

Google liefert Material Symbols als variable Schrift mit den Achsen FILL, wght, GRAD und opsz, und die drei Schnitte (outlined, rounded, sharp) sind das, worauf sich diese Achsen auflösen. Eine GPU-Displayliste kann keine Schrift zeichnen, also trägt dieses Paket stattdessen die schon aufgelösten Pfade: der Schnitt lebt im Namen des Icons (Home, HomeRounded, HomeSharp) und es gibt keine FILL-Achse, also sind X und XOutline zwei Einträge. Die Namen sind die von Iconify in PascalCase, also ist material-symbols:play-arrow-rounded gleich PlayArrowRounded.

Es ist außerdem das schwerste Pack, das das Framework veröffentlicht (~13 MB Assembly gegen Phosphors 8), was früher ein Rat dazu war, welches Pack zu wählen ist, und es nicht mehr ist. Siehe unten.

Ein Pack liefert die Glyphen, die deine App benennt

Eine veröffentlichte App trägt die Icons, die sie VERWENDET, nicht das Pack, das sie referenziert hat. Am größten gemessen: die Assembly des Packs geht von 14.558.720 Byte auf 7.680, und eine Veröffentlichung, die sie trug, von 35.256 KB auf 20.952 KB, 41 % kleiner, für eine App, die eine Handvoll Glyphen aus 16.284 zeichnet.

Nichts zu konfigurieren und nichts zu benennen. Was sich geändert hat, ist die FORM, in der die Packs erzeugt werden: ein Feldinitialisierer kompiliert in einen statischen Konstruktor für die ganze Klasse, und ein statischer Konstruktor ist nicht entfernbar, also wurde ein Feld-Pack ganz ausgeliefert, alles davon, um fünf Glyphen zu zeichnen. Eine Eigenschaft mit Ausdruckskörper ist ein eigener Methodenkörper, und der IL-Trimmer wirft die weg, die nichts aufruft:

// vorher: ein statischer Konstruktor, 16.284 Glyphen, nicht entfernbar
public static readonly IconGlyph Camera = new("camera", "M14.5 4h-5L7 7", …);

// jetzt: ein Methodenkörper pro Glyphe, und der Trimmer behält die, die du benennst
public static IconGlyph Camera => new("camera", "M14.5 4h-5L7 7", …);

Es braucht PublishTrimmed, was den Trimmer überhaupt laufen lässt. Ohne es hat das Pack dieselbe Größe, die es immer hatte, also bleibt „wähle ein kleineres Pack“ der Rat für eine Veröffentlichung ohne Trimmen. Mit ihm hört die Packgröße auf, ein Grund zu sein, einen Satz einem anderen vorzuziehen: nimm die Icons, die richtig aussehen.

Seit 0.2.0-preview.47

Grafik aus einer .svg-Datei

Seit 0.2.0-preview.29

Ein Icon ist ein Pfad in einer Tönung. Ein LOGO sind mehrere Formen, jede in der Farbe, die ihr Gestalter gewählt hat, das ist Drawing, und es ist der Knoten, den du auf eine Datei richtest.

Lege die Datei in den Assets-Ordner der App und sie wird ein typisiertes Mitglied:

// Assets/mark.svg  →  Vectors.Mark
column.Add(new Drawing(Vectors.Mark, width: 240, label: "eQuantic"));

Das Lesen geschieht zur Build-Zeit: auf keinem der beiden Ziele liest etwas zur Laufzeit eine Datei, weil ein Browser es nicht kann und eine native App ihre Grafik zweimal tragen würde. Ein typisiertes Mitglied statt einer Pfadzeichenkette, aus demselben Grund, aus dem der Rest dieses SDK Flächen erzeugt: Vectors.Mark ist ein Kompilierfehler, wenn es falsch ist, und Drawing("mark.svg") ist zur Laufzeit eine leere Fläche.

Eine Zahl behält das eigene Seitenverhältnis der Grafik (ein Icon ist standardmäßig quadratisch, weil ein Icon das ist; ein gequetschtes Logo ist ein falsches Logo). Gib beide, um absichtlich zu umrahmen oder zu strecken.

In der Breite seiner Spalte. Die Breite ist ein SizeValue, also nimmt SizeValue.Fill die Breite, die der Elternteil anbietet, und das Seitenverhältnis der Grafik entscheidet die Höhe: eine Karte in einer anpassungsfähigen Spalte, was keine Zahl für jedes Fenster sagt. Das Web schreibt width: 100% und aspect-ratio; Photon löst die Breite auf, wie es die eines Canvas auflöst, und malt in der Box, die es gelayoutet hat. Eine Höhe, die du gibst, gewinnt weiterhin. Ein Fill auf einer Breite, die der Elternteil aus seinem eigenen Inhalt bemisst, hat nichts zu füllen und ist null breit, wie es ein Canvas ist, und eine Zeichnung lehnt SizeValue.Hug ab, da sie keinen Inhalt hat, den sie umschließen könnte.

column.Add(new Drawing(Vectors.Mark, SizeValue.Fill, label: "eQuantic"));

Seit 0.2.0-preview.61

Tönen. Eine Form, die die Datei als currentColor gelassen hat, ist die Grafik, die um Tönung bittet, also übergib tint: und sie folgt, während jede Form, die ihre eigene Farbe gewählt hat, es ignoriert. Im Web erreicht das Wort currentColor das Markup und die Tönung wird als CSS-color gesetzt, sodass die Kaskade darauf antworten kann; auf Photon wird jede Form rasterisiert und in ihrer eigenen Farbe gemalt.

new Drawing(Vectors.Mark, 240, tint: theme.TextPrimary)   // die monochrome Hälfte folgt dem Theme

Die Teilmenge, benannt wie die von Markdown. Verstanden: viewBox, path, rect (mit rx/ry), circle, ellipse, line, polyline, polygon, verschachteltes g, transform (translate / scale / rotate / skew / matrix, in die Pfaddaten eingebacken statt mitgetragen), fill, stroke, stroke-width, fill-rule, die drei Deckkräfte, dieselben Eigenschaften in einem style-Attribut geschrieben, und Farben als #rgb / #rrggbb / #rrggbbaa / rgb() / rgba() / none / currentColor / die Grundnamen. Absichtlich weggelassen: Muster, clipPath, mask, filter, use, image und text: jedes braucht einen Malserver, für den dieses Modell keinen Platz hat, oder eine Schrift. Diese Formen kommen FEHLEND an statt mit einer Farbe gefüllt, die niemand gewählt hat, und der Build sagt, welche Datei er übersprungen hat.

Eine Folge von Farben

Seit 0.2.0-preview.31

linearGradient und radialGradient werden verstanden, mit ihren Stopps, in beiden Einheiten (objectBoundingBox, die Vorgabe, ist ein BRUCHTEIL der eigenen Box der Form; userSpaceOnUse misst auf dem viewBox-Gitter), und href wird gefolgt für eine Palette, die zwei Gradienten teilen. Die defs werden in einem eigenen Durchgang gelesen, also darf eine Füllung einen Gradienten benennen, den die Datei nach ihr deklariert, was die Hälfte der Exporteure der Welt schreibt.

Jedes Ziel malt die Folge so, wie es es nativ kann. Im Web trägt die Grafik ihre eigenen defs und jede Form benennt einen mit url(#…), sodass der Browser in jeder Größe interpoliert, in der die Box endet; die id ist ein Hash des Gradienten selbst, also wird eine Folge, die zwei Formen verwenden, einmal deklariert und der Server und der Client-Zwilling landen auf derselben Zeichenkette. Auf Photon wird dieselbe Alphamaske, die der Rasterisierer schon gemacht hat, mit der eigenen Gradientenfarbe der Engine gefüllt, die der Pfadgradient ist, den der TEXT schon verwendete: kein neuer Zeichenbefehl und kein neuer Shader-Einstiegspunkt.

Zwei Grenzen: eine Folge geht mit zwei Stopps auf Photon hinüber (dem ersten und dem letzten, weil die Farbe der Engine zwischen einem Paar interpoliert; mehrere Stopps sind ein eigenes Stück), und gradientTransform, spreadMethod und der Brennpunkt eines Radialen werden weggelassen. Ein Malserver, den der Leser nicht versteht, malt weiterhin NICHTS, was jeder Malserver vor diesem tat.

Wie ein Icon auf den Bildschirm kommt

Ein Icon ist ein WERT, kein Dienst. Icons.Heart ist ein IconGlyph, ein Name, ein Pfad und ob er gestrichen oder gefüllt ist, und der Icon-Knoten zeichnet ihn. Der Web-Realisierer schreibt ein inline <svg>; der Photon-Realisierer rasterisiert den Pfad einmal und legt ihn in den Cache. Es gibt kein Register zu befragen und nichts zu registrieren.

Es war einmal eine Anbieterschnittstelle (IIconProvider in eQuantic.UI.Core, die Namen über DI zu Komponenten auflöste), und das ging mit dem Komponentenmodell von vor write-once in 0.2.0-preview.48. Ein Anbieter kann nur auf dem Ziel antworten, für das er geschrieben wurde, und ein Icon muss auf drei dasselbe Icon sein.

Deine eigenen Icons

Zwei Wege, beide ohne Anbieter:

• Eine .svg-Datei in Assets/ wird zur Build-Zeit ein Vectors.Mark, siehe Grafik aus einer .svg-Datei oben.
• Ein IconGlyph, das du konstruierst, wenn du die Pfaddaten schon hast:

public static class MyIcons
{
    // Absichtlich eine Eigenschaft und kein Feld: ein Feld-Pack kompiliert in einen statischen
    // Konstruktor und wird ganz ausgeliefert, worum es in der Trimm-Anmerkung oben geht.
    public static IconGlyph Logo => new("logo", "M12 2L2 7l10 5 10-5-10-5z", IconGlyphStyle.Fill);
}

Icon(MyIcons.Logo, size: IconSize.Lg)