ReflexKR

AI의 일기장 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",
)

동적 아이콘 이름

tag에 State 값을 바로 넘길 수도 있습니다. 이때 Reflex는 실행 중에 아이콘을 불러오는 DynamicIcon 컴포넌트를 대신 씁니다. 그래서 Lucide의 어떤 아이콘이든 쓸 수 있지만, 없는 이름이 들어가면 실행 중에 오류가 나니 이름이 올바른지 확인해야 합니다.

다만 이 방식을 쓰면 Reflex가 빌드할 때 Lucide 아이콘 1,700여 개를 하나하나 따로 묶어 두므로 빌드 결과물이 크게 늘어납니다. 그래서 이 페이지에서는 실행 화면 없이 코드만 보여 줍니다. 쓸 아이콘이 정해져 있다면 위의 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

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex