ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Datenanzeige

Icon

rx.icon

Offizielle Doku

Werkstattauftrag

Setz eine Lupe vor das Suchfeld und Versand- und Rückgabe-Icons vor die Produkthinweise.

rx.icon zeigt ein einzelnes Bild aus der Icon-Sammlung Lucide. Den Namen des Icons übergibst du als erstes Argument oder als tag. Standard ist snake_case, aber auch das kebab-case, das du von der Lucide-Website kopierst, funktioniert unverändert.

rx.flex(
    rx.icon("calendar"),
    rx.icon(tag="calendar"),
    rx.icon("circle_check_big"),
    rx.icon("circle-check-big"),
    spacing="2",
)

Ganz oben in der offiziellen Doku steht eine Liste, in der du alle Icons durchsuchen und ihre Namen kopieren kannst. Wähle deine Icons aus dieser Liste oder auf der Lucide-Website. Verwendest du einen Namen, der nicht in der Liste steht, gibt es beim Kompilieren eine Warnung, und das Icon wird durch ein Fragezeichen (circle_help) ersetzt.

Props ausprobieren

Das Aussehen eines Lucide-Icons bestimmen drei Props: size, stroke_width und color. Diese Werkbank übergibt auch den Icon-Namen als State-Wert und rendert deshalb nach dem Verfahren „Dynamische Icon-Namen“ weiter unten.

Props ausprobieren

tag

stroke_width

color

rx.icon("heart", size=48, stroke_width=2, color=rx.color("indigo", 9))

stroke_width ist die Strichstärke. color bekommt rx.color(Farbe, Stufe). size nimmt nur ganze Zahlen an und wird deshalb unten in einem eigenen Beispiel gezeigt.

Prop	Werte	Standard	Verwendung
`tag` (oder erstes Argument)	Icon-Name	Pflicht	Welches Icon
`size`	Ganzzahl (Pixel)	`24`	Breite und Höhe
`stroke_width`	Zahl	`2`	Strichstärke
`color`	Farbname, `rx.color(...)`	Textfarbe	Strichfarbe; ohne Angabe gilt die umgebende Textfarbe

Strichstärke und Größe

stroke_width ist die Stärke der Linien. Je kleiner die Zahl, desto leichter und feiner wirkt das Icon.

rx.flex(
    rx.icon("moon", stroke_width=1),
    rx.icon("moon", stroke_width=1.5),
    rx.icon("moon", stroke_width=2),
    rx.icon("moon", stroke_width=2.5),
    spacing="2",
)

size ist eine Ganzzahl in Pixeln. Steht das Icon neben Text, passt du es etwa an die Schriftgröße an.

rx.flex(
    rx.icon("zoom_in", size=15),
    rx.icon("zoom_in", size=20),
    rx.icon("zoom_in", size=25),
    rx.icon("zoom_in", size=30),
    align="center",
    spacing="2",
)

Farbe

color nimmt einen einfachen Farbnamen an.

rx.flex(
    rx.icon("zoom_in", size=18, color="indigo"),
    rx.icon("zoom_in", size=18, color="cyan"),
    rx.icon("zoom_in", size=18, color="orange"),
    rx.icon("zoom_in", size=18, color="crimson"),
    spacing="2",
)

Du kannst wie bei rx.color("purple", 6) auch eine Radix-Farbe zusammen mit einer Stufe von 1 bis 12 angeben. "accent" ist die Hauptfarbe des Themes; wechselt das Theme, ändert sich auch die Icon-Farbe. Oben die Stufen 1–12 von purple, unten die von accent.

rx.flex(
    rx.flex(*[rx.icon("zoom_in", size=18, color=rx.color("purple", i)) for i in range(1, 13)], spacing="2"),
    rx.flex(*[rx.icon("zoom_in", size=18, color=rx.color("accent", i)) for i in range(1, 13)], spacing="2"),
    direction="column",
    spacing="2",
)

Dynamische Icons: Auswahl mit rx.match

Steht fest, welche wenigen Icons infrage kommen, wählst du mit rx.match das zum State-Wert passende aus. Alle Icons werden vorab kompiliert, deshalb ist das der sicherste Weg.

class IconMatchState(rx.State):
    op: str = "plus"

    @rx.event
    def set_icon_op(self, value: str | list[str]):
        if isinstance(value, str):
            self.op = value


rx.flex(
    rx.segmented_control.root(
        rx.segmented_control.item("plus", value="plus"),
        rx.segmented_control.item("minus", value="minus"),
        rx.segmented_control.item("equal", value="equal"),
        value=IconMatchState.op,
        on_change=IconMatchState.set_icon_op,
    ),
    rx.match(
        IconMatchState.op,
        ("plus", rx.icon("plus")),
        ("minus", rx.icon("minus")),
        ("equal", rx.icon("equal")),
    ),
    spacing="3",
    align="center",
)

Dynamische Icon-Namen

Du kannst einen State-Wert auch direkt an tag übergeben. Dann verwendet Reflex stattdessen die Komponente DynamicIcon, die das Icon zur Laufzeit lädt. So ist jedes Lucide-Icon möglich – ein nicht existierender Name führt aber zur Laufzeit zu einem Fehler, also prüfe, ob die Namen stimmen.

Der Haken: Bei diesem Weg packt Reflex beim Build jedes Lucide-Icon (rund 1.700) in eine eigene Datei, und der Build wächst stark. Deshalb zeigt diese Seite nur den Code, ohne Live-Demo. Wenn feststeht, welche Icons du brauchst, nimm den rx.match-Weg von oben.

import random


class IconDynamicState(rx.State):
    current_icon: str = "heart"

    @rx.event
    def change_icon(self):
        icons = ["heart", "star", "bell", "calendar", "settings"]
        self.current_icon = random.choice([i for i in icons if i != self.current_icon])


rx.vstack(
    rx.icon(IconDynamicState.current_icon, size=30, color="red"),
    rx.text(IconDynamicState.current_icon, size="2", color_scheme="gray"),
    rx.button("Change Icon", on_click=IconDynamicState.change_icon),
    spacing="3",
    align="center",
)

Auftrag erledigt

Icons kommen als Kinder in andere Komponenten. Eine Lupe in einem Badge ergibt die Form eines Suchfelds, und vor die Hinweistexte setzt du eingefärbte Icons.

Search documentation...

Free shipping

30-day returns

rx.flex(
    rx.badge(
        rx.flex(
            rx.icon("search", size=18),
            rx.text("Search documentation...", size="3", weight="medium"),
            spacing="1",
            align="center",
        ),
        size="2",
        radius="full",
        color_scheme="gray",
    ),
    rx.flex(
        rx.icon("truck", color=rx.color("green", 9)),
        rx.text("Free shipping"),
        rx.icon("rotate-ccw", color=rx.color("amber", 9)),
        rx.text("30-day returns"),
        spacing="2",
        align="center",
    ),
    direction="column",
    spacing="3",
)

Werkstattnotizen

rx.icon("Name") oder rx.icon(tag="Name"). snake_case und kebab-case gehen beide.
size (Pixel-Ganzzahl), stroke_width (Strichstärke) und color (Farbname oder rx.color) bestimmen das Aussehen.
Bei einer Auswahl aus wenigen Icons rx.match; wird ein beliebiger Name per State übergeben, kommt DynamicIcon zum Einsatz.
Ein falscher dynamischer Name führt zu einem Laufzeitfehler. Ein falscher fester Name ergibt eine Kompilierwarnung und wird zu circle_help.

← Zurück

Datenanzeige · Avatar

Weiter →

Datenanzeige · Callout

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex