El taller de componentes: los 100 componentes de Reflex
·
Resumen del curso
Diseño
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
Tipografía
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
Formularios
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
Visualización de datos
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
Mostrar y ocultar
·
Tabs
·
Accordion
·
Segmented Control
Superposiciones
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
Renderizado dinámico
·
Cond
·
Match
·
Foreach
·
Auto Scroll
Multimedia
·
Image
·
Audio
·
Video
Tablas y cuadrículas de datos
·
Table
·
Data Table
·
Data Editor
Gráficos
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
Piezas de gráficos
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
Otras bibliotecas de gráficos
·
Plotly
·
Pyplot
Elementos HTML
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
Otras herramientas
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.iconDocumentación oficial
Pedido del taller
Pon una lupa delante del buscador y, delante de los textos informativos del producto, iconos de envío y devolución.
rx.icon muestra un dibujo del conjunto de iconos Lucide. El nombre del icono se pasa como primer argumento o en tag. Lo habitual es snake_case, pero el kebab-case copiado de la web de Lucide también funciona tal cual.
rx.flex(
rx.icon("calendar"),
rx.icon(tag="calendar"),
rx.icon("circle_check_big"),
rx.icon("circle-check-big"),
spacing="2",
)Al principio de la documentación oficial hay una lista para buscar cualquier icono y copiar su nombre. Elige los iconos en esa lista o en la web de Lucide. Si usas un nombre que no existe, al compilar aparece un aviso y se sustituye por el icono de interrogación (circle_help).
El aspecto de un icono Lucide lo deciden tres propiedades: size, stroke_width y color. Este banco de pruebas pasa también el nombre del icono como valor del State, así que se dibuja con el método de «Nombre de icono dinámico» que verás más abajo.
Prueba las propiedades
tag
stroke_width
2
color
rx.icon("heart", size=48, stroke_width=2, color=rx.color("indigo", 9))| Propiedad | Valores | Por defecto | Uso |
|---|---|---|---|
tag (o el primer argumento) | Nombre del icono | Obligatorio | Qué icono es |
size | Entero (píxeles) | 24 | Ancho y alto |
stroke_width | Número | 2 | Grosor del trazo |
color | Nombre de color, rx.color(...) | Color del texto | Color del trazo; si no se indica, toma el color del texto que lo rodea |
stroke_width es el grosor del trazo. Cuanto más pequeño el número, más ligero y fino se ve.
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 es un entero en píxeles. Junto a un texto, ajústalo a un tamaño parecido al de la letra.
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",
)A color le puedes dar un nombre de color básico.
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",
)También puedes dar un color Radix con un tono del 1 al 12, como rx.color("purple", 6). "accent" es el color principal del tema, así que si cambia el tema, cambia también el color del icono. La fila de arriba muestra los tonos 1~12 de purple; la de abajo, los de 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",
)Si los iconos posibles son unos pocos y conocidos, elige el que corresponde al valor del State con rx.match. Todos los iconos se compilan de antemano, así que es el método más seguro.
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",
)También puedes pasar un valor del State directamente a tag. En ese caso Reflex usa en su lugar el componente DynamicIcon, que carga el icono en tiempo de ejecución. Así puedes usar cualquier icono de Lucide, pero si llega un nombre que no existe se produce un error en ejecución, de modo que asegúrate de que el nombre sea correcto.
Eso sí: con este método Reflex empaqueta en la compilación cada icono de Lucide (unos 1.700) como un archivo aparte, así que la compilación crece mucho. Por eso esta página muestra solo el código, sin demo en vivo. Si sabes qué iconos necesitas, usa el método con rx.match de arriba.
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",
)Los iconos van como hijos de otros componentes. Metemos una lupa dentro de un badge para imitar un buscador y ponemos iconos de color delante de los textos informativos.
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",
)Notas del taller
rx.icon("nombre") o rx.icon(tag="nombre"). Valen snake_case y kebab-case.
El aspecto se define con size (entero en píxeles), stroke_width (grosor del trazo) y color (nombre de color o rx.color).
Para elegir entre unos pocos, rx.match; si pasas cualquier nombre desde el State, se usa DynamicIcon.
Un nombre dinámico incorrecto da error en ejecución. Un nombre fijo incorrecto da un aviso al compilar y se sustituye por circle_help.
Recibe avisos de nuevas lecciones
Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.
R
ReflexKR
Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.
ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café
Aviso de afiliados© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Preguntas y respuestas
Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.