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の3つで決まります。この実習台はアイコン名も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

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex