ReflexKR

Reflex 官方文档

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

数据展示

Icon

rx.icon

官方文档

工坊订单

请在搜索框前面加一个放大镜，在商品说明文字前面加上配送和退货图标。

rx.icon 从 Lucide 图标集中显示一个图标。图标名作为第一个参数或通过 tag 传入。名字默认用 snake_case，但从 Lucide 网站复制来的 kebab-case 也可以直接用。

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

官方文档最上方有一个可以搜索全部图标并复制名字的列表。要用的图标从那个列表或 Lucide 网站里挑。如果写了列表里没有的名字，编译时会给出警告，并换成问号图标（circle_help）。

试着改属性

Lucide 图标的外观由 size、stroke_width、color 三个属性决定。这个实习台把图标名也作为 State 值传入，所以会按下文“动态图标名”的方式渲染。

试着改属性

tag

stroke_width

color

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

stroke_width 是线条粗细。color 传的是 rx.color(颜色, 色阶)。size 只接受整数，放在下面的示例里单独看。

属性	取值	默认值	用途
`tag`（或第一个参数）	图标名	必填	用哪个图标
`size`	整数（像素）	`24`	宽和高
`stroke_width`	数字	`2`	线条粗细
`color`	颜色名、`rx.color(...)`	文字颜色	线条颜色。不传时跟随周围的文字颜色

线条粗细与大小

stroke_width 是线条的粗细。数字越小，看起来越轻盈精细。

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 是以像素为单位的整数。放在文字旁边时，调到和字号差不多大。

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",
)

颜色

color 可以传基本的颜色名。

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",
)

也可以像 rx.color("purple", 6) 这样同时给出 Radix 颜色和 1~~12 的色阶。"accent" 是主题的主色，主题一变，图标颜色也跟着变。上面一行是 purple，下面一行是 accent 的 1~~12 色阶。

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",
)

动态图标：用 rx.match 挑选

如果要用的图标只有固定几个，就用 rx.match 按 State 值挑出对应的图标。所有图标都会预先编译，这是最稳妥的做法。

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",
)

动态图标名

也可以把 State 值直接传给 tag。这时 Reflex 会改用在运行时加载图标的 DynamicIcon 组件。因此 Lucide 里的任何图标都能用，但如果传入不存在的名字，运行时会报错，所以要确认名字正确。

不过，用这种方式时 Reflex 会在构建时把约 1,700 个 Lucide 图标逐个打包成单独的文件，构建产物会大幅增加。所以本页只展示代码，不放运行效果。如果要用的图标是确定的，请用上面的 rx.match 方式。

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",
)

完成订单

图标可以作为其他组件的子元素。在徽章里放一个放大镜做成搜索框的样子，再在说明文字前面放上着了色的图标。

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",
)

工坊笔记

rx.icon("名字") 或 rx.icon(tag="名字")。snake_case 和 kebab-case 都可以。
用 size（像素整数）、stroke_width（线条粗细）、color（颜色名或 rx.color）决定外观。
从几个中挑选用 rx.match；把任意名字通过 State 传入时会用到 DynamicIcon。
动态名字写错会在运行时报错；固定名字写错会出现编译警告，并换成 circle_help。

← 上一课

数据展示 · Avatar

下一课 →

数据展示 · Callout

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

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

Built with Reflex