Die Webentwicklung mit Rust erlebt zurzeit einen bemerkenswerten Aufschwung. Besonders das Framework Leptos gewinnt immer mehr Aufmerksamkeit, da es eine moderne und sichere Möglichkeit bietet, Webanwendungen schnell und performant zu erstellen. Allerdings bringt die Integration von Icons in Leptos einige Herausforderungen mit sich, die durch clevere Nutzung von Makros und der Crabtime-Bibliothek gelöst werden können. Diese Kombination ermöglicht nicht nur die einfache Einbindung von SVG-Icons, sondern reduziert auch die Kompilierzeit signifikant und schafft eine elegante Komponenten-API. Traditionell wurden Icons in Webprojekten häufig über Icon-Fonts wie FontAwesome eingebunden.
Während diese Methode lange Zeit Standard war, haben sich die Ansprüche an moderne Webanwendungen verändert. Icon-Fonts leiden unter Einschränkungen, etwa in der Anpassbarkeit und der Performance. Das Einbetten von SVG-Dateien direkt im Code hat sich daher als moderner und flexibler Ansatz etabliert. Der Vorteil von SVG-Icons liegt in der Skalierbarkeit, der besseren Kontrolle über Farben und Größen sowie der Möglichkeit, nur tatsächlich verwendete Icons ins Projekt zu integrieren, was die Gesamtgröße der Anwendung reduziert. Projekte wie Lucide haben in der JavaScript-Welt gezeigt, wie wichtig es ist, SVG-Icons effizient und modular zu gestalten.
Rust-Ports wie leptos_lucide und lucide-leptos bilden ähnliche Funktionalitäten ab und setzen dabei mehr auf type-sichere Komponenten. Allerdings führt eine automatische Generierung von einzelnen Komponenten für tausende Icons zu erheblichen Kompilierzeiten, was die Entwicklerproduktivität stark beeinträchtigen kann. Hier setzt die Nutzung von Crabtime an. Crabtime ist eine mächtige Bibliothek zur Compile-Time-Codegenerierung in Rust, die es ermöglicht, Rust-Code bereits beim Kompilieren anzupassen oder zu erweitern. Mithilfe von Crabtime kann man Makros schreiben, die zur Compile-Zeit SVG-Dateien laden, deren Inhalte escapen und daraus Rust-Komponenten generieren.
Dadurch wird vermieden, dass die Kompilierzeit unnötig durch das Laden und Parson aller Icons in jedem Projektlauf belastet wird. Ein zentraler Baustein in diesem Vorgehen ist das Makro raw_icon_content!. Dieses Makro liest zur Compile-Zeit eine SVG-Datei ein, wandelt deren Inhalt in einen Rust-konformen String um und stellt diesen als Rohtext zur Verfügung, der in Komponenten eingebettet werden kann. Das funktioniert ähnlich wie das bekannte include_str!-Makro von Rust, bietet aber durch die Crabtime-Integration mehr Flexibilität bei der Pfadverwaltung und Entwicklung. Mit raw_icon_content! kann ein Icon einfach per Namen referenziert und dessen SVG-Inhalt direkt in eine Leptos-Komponente eingebettet werden.
Das ermöglicht eine Darstellung in HTML-Elementen, etwa innerhalb eines <i>-Tags, dessen innerHtml mit dem SVG-Inhalt gefüllt wird. Auf diese Weise können Entwickler Icons problemlos im Benutzerinterface anzeigen, ohne direkt mit schweren Icon-Fonts oder externen Bibliotheken arbeiten zu müssen. Doch das einfache Einbetten von Icon-Strings führt schnell zu einem anderen Problem: Duplizierung und mangelnde Wiederverwendbarkeit. Wenn der gleiche Icon-SVG-Code an vielen Stellen manuell eingefügt wird, verschwenden Projekte Speicher und Effizienz. Aus diesem Grund ist es sinnvoll, Icons als eigenständige Komponenten zu definieren, die wie normale UI-Bausteine einfach mehrfach verwendet werden können.
Die Lösung dafür ist das Makro define_icon_component!. Dieses Makro nutzt Crabtime, um zur Compile-Zeit für jeden benötigt Icon-Namen eine entsprechende Rust-Komponente zu erzeugen. Dabei wird der SVG-Inhalt über raw_icon_content! geladen und in eine Komponente eingepackt, die über den üblichen Leptos-View-Mechanismus gerendert wird. So lassen sich Icons einfach und einheitlich über Komponenten wie <icons::Menu /> nutzen. Die Vorteile liegen auf der Hand: Zum einen sinkt die Kompilierzeit, da nur die explizit definierten Icons vom Compiler verarbeitet werden.
Zum anderen entsteht eine saubere Trennung der UI-Elemente und eine klare API, die die Nutzung von Icons in der gesamten Anwendung standardisiert und vereinfacht. Die Einbindung von Crabtime sorgt zudem dafür, dass der Generierungsprozess dynamisch bleibt – Änderungen an den Icon-Dateien wirken sich unmittelbar bei der nächsten Kompilierung aus. Ein weiteres Thema ist die Anpassbarkeit der Icons hinsichtlich Größe und Strichbreite. Bei SVGs sind solche Parameter essenziell, um die Icons im Design flexibel zu halten. Um dies zu ermöglichen, wurde das define_icon_component!-Makro erweitert, sodass die generierten Komponenten Props für Größe (size) und Strichstärke (stroke_width) akzeptieren.
Diese Eigenschaften können entweder per CSS oder direkt über Inline-Styles gesteuert werden. Eine mögliche CSS-Klasse, etwa .icon, kann so definiert werden, dass das SVG im Komponenten-Wrapper die Dimensionen und Strichstärken erbt. Die Komponenten setzen die Eigenschaften dann mittels style-Attributen, basierend auf den übergebenen Props. In der Praxis sieht dies vor, dass Entwickler Icons mit unterschiedlichen Größen und Stilen aufrufen können, beispielsweise eine Menü-Schaltfläche mit 48 Pixeln Kantenlänge und einer Strichbreite von 2 Pixeln.
Die Integration von Crabtime bietet allerdings auch einige Herausforderungen. So muss die String-Escaping-Problematik beachtet werden, denn SVG-Inhalte enthalten häufig Zeichen und Sequenzen, die in Rust-Strings speziell behandelt werden müssen. Aktuell benötigt man häufig selbst eine Funktion zur korrekten Escapierung, die zum Beispiel Hash-Zählungen vornimmt, um rohe String-Literale sauber zu bilden. Ein noch nicht gelöstes Wunschfeature ist eine native crabtime::escape_string!-Funktion, die diese Arbeit vereinfachen würde. Ein weiterer Aspekt ist das Fehlermanagement.
In stabiles Rust können Crabtime-Makros Fehlermeldungen zur Compile-Zeit ausgeben, doch das Verhalten bei Panics oder Errors ist noch nicht ideal dokumentiert. Manchmal werden Fehler lediglich geloggt, ohne die Kompilierung abzubrechen, was die Entwickler verwirrt und Debugging erschwert. Hier wird in der Community noch diskutiert, welche Strategien am besten geeignet sind, um nachvollziehbare und frühzeitige Fehlerflaggen zu setzen. Ein Versuch, andere Leptos-Makros wie include_view! zu verwenden, scheiterte aufgrund der spezifischen Anforderungen an Einbettung von „raw inner HTML“. include_view! versucht, den SVG-Inhalt als View-Fragment zu parsen, was bei HTML-Kommentaren oder komplexeren SVG-Strukturen zu Problemen führt.
Crabtime gelingt es hingegen, die benötigten Strings einfach und unverändert einzulesen und auszugeben, wodurch diese Probleme elegant umgangen werden. Diese neuartige Kombination aus Leptos, Crabtime und einem intelligenten Makro-Design zeigt vor allem eines: Rust wird zunehmend zu einer erstklassigen Option für moderne Webentwicklung. Die Möglichkeiten, die Compile-Time-Generierung bietet, erlauben es Entwicklern, performante und wartbare Applikationen zu bauen, ohne große Kompromisse bei der Developer-Experience einzugehen. Insgesamt stellt die Entwicklung von Makros zur Einbindung von Icons in Leptos mit Crabtime einen spannenden Paradigmenwechsel dar. Statt massiver, automatisch generierter Icon-Wrapper durch zahlreiche Icon-Dateien, lassen sich Schlüssel-Icons gezielt auswählen und maßgeschneidert als Komponenten erzeugen.
Diese Komponenten sind leichtgewichtig und bieten gleichzeitig volle Gestaltungsfreiheit, sowohl in Hinsicht auf Größe als auch auf visuelle Details wie Strichstärke. Wer sich künftig mit der Entwicklung von Webinterfaces in Rust beschäftigt, sollte die Möglichkeiten von Crabtime im Auge behalten. Die Bibliothek bietet nicht nur die Chance, komplexe Code-Generierungen eleganter zu realisieren, sondern auch intelligente Optimierungen, die besonders bei großen Projekten mit vielen Assets den Unterschied machen. Die Zukunft von Rust auf dem Web scheint damit heller denn je, denn Leptos und Crabtime zeigen gemeinsam eine leistungsstarke Kombination, die Entwicklung und Performance optimal verbindet.
![We Lost the Only Double-Sided Monorail [video]](/images/69167B55-36F7-4CBA-B9C8-77ABE066B136)
