Skip to content

Commit 1ae410e

Browse files
LineIndentLineIndent
authored
add simple icon wrapper (#45)
* add simple icon wrapper * ruff
1 parent dadfe47 commit 1ae410e

File tree

9 files changed

+206
-51
lines changed

9 files changed

+206
-51
lines changed

‎demo/demo/demo.py‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,65 @@
33
import reflex as rx
44

55
import reflex_ui as ui
6-
6+
from .simple_icon import simple_icon_demo
77

88
class State(rx.State):
99
seed: int = 0
1010

1111

1212
def index() -> rx.Component:
13-
# Welcome Page (Index)
1413
return rx.el.div(
15-
ui.tooltip(
16-
ui.button(
17-
ui.icon("SmileIcon"),
18-
"Click me",
19-
on_click=rx.toast.success(
20-
"You are cool :)",
21-
position="top-center",
14+
# Left: Column of UI components
15+
rx.el.div(
16+
ui.tooltip(
17+
ui.button(
18+
ui.icon("SmileIcon"),
19+
"Click me",
20+
on_click=rx.toast.success(
21+
"You are cool :)",
22+
position="top-center",
23+
),
2224
),
25+
content="Seriously, click me",
2326
),
24-
content="Seriously, click me",
25-
),
26-
ui.checkbox(
27-
label="Click me",
28-
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
29-
),
30-
ui.slider(
31-
value=State.seed,
32-
on_value_change=State.set_seed,
33-
on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
34-
class_name="max-w-xs",
35-
),
36-
ui.gradient_profile(
37-
seed=State.seed,
38-
class_name="size-10",
39-
),
40-
ui.switch(
41-
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
27+
ui.checkbox(
28+
label="Click me",
29+
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
30+
),
31+
ui.slider(
32+
value=State.seed,
33+
on_value_change=State.set_seed,
34+
on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
35+
class_name="max-w-xs",
36+
),
37+
ui.gradient_profile(
38+
seed=State.seed,
39+
class_name="size-10",
40+
),
41+
ui.switch(
42+
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
43+
),
44+
ui.select(
45+
items=[f"Item {i}" for i in range(1, 11)],
46+
name="select",
47+
default_value="Select an item",
48+
on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
49+
on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
50+
),
51+
class_name="flex flex-col gap-y-6 justify-center items-center",
4252
),
43-
ui.select(
44-
items=[
45-
"Item 1",
46-
"Item 2",
47-
"Item 3",
48-
"Item 4",
49-
"Item 5",
50-
"Item 6",
51-
"Item 7",
52-
"Item 8",
53-
"Item 9",
54-
"Item 10",
55-
],
56-
name="select",
57-
default_value="Select an item",
58-
on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
59-
on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
53+
54+
# Right: Icon demo
55+
rx.el.div(
56+
simple_icon_demo(),
57+
class_name="flex justify-center items-center",
6058
),
59+
60+
# Theme switcher (floating top-right)
6161
ui.theme_switcher(class_name="absolute top-4 right-4"),
62-
class_name=ui.cn(
63-
"flex flex-col gap-6 items-center justify-center h-screen", "bg-secondary-1"
64-
),
62+
63+
# Parent container: center everything horizontally & vertically
64+
class_name="flex flex-row gap-16 justify-center items-center h-screen bg-secondary-1 relative",
6565
)
6666

6767

‎demo/demo/simple_icon.py‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import reflex as rx
2+
import reflex_ui as ui
3+
4+
def simple_icon_demo():
5+
icons = [
6+
"SiGithub",
7+
"SiPytorch",
8+
"SiPython",
9+
"SiReact",
10+
"SiDell",
11+
"SiOkta",
12+
"SiOpenai",
13+
"SiDatabricks",
14+
"SiDocker",
15+
"SiLinux",
16+
"SiVercel",
17+
"SiNetlify"
18+
]
19+
20+
# Define the pyramid shape (row lengths)
21+
row_counts = [1, 2, 3, 4, 5, 4, 3, 2, 1]
22+
23+
# Track the index in the icons list
24+
index = 0
25+
rows = []
26+
27+
for count in row_counts:
28+
row_icons = icons[index:index+count]
29+
index += count
30+
31+
rows.append(
32+
rx.el.div(
33+
*[ui.simple_icon(icon, size=48) for icon in row_icons],
34+
class_name="flex justify-center gap-3 py-1"
35+
)
36+
)
37+
38+
return rx.el.div(
39+
*rows,
40+
class_name="w-full h-screen flex flex-col items-center justify-center"
41+
)

‎reflex_ui/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
**_REFLEX_UI_MAPPING,
3939
"components": ["base"],
4040
"components.icons.hugeicon": ["hi", "icon"],
41+
"components.icons.simple_icon": ["simple_icon"],
4142
"components.icons.others": ["spinner"],
4243
"utils.twmerge": ["cn"],
4344
}

‎reflex_ui/__init__.pyi‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ from .components.base.toggle_group import toggle_group
3535
from .components.base.tooltip import tooltip
3636
from .components.icons.hugeicon import hi, icon
3737
from .components.icons.others import spinner
38+
from .components.icons.simple_icon import simple_icon
3839
from .utils.twmerge import cn
3940

4041
_REFLEX_UI_MAPPING = {
@@ -72,6 +73,7 @@ _SUBMOD_ATTRS = {
7273
**_REFLEX_UI_MAPPING,
7374
"components": ["base"],
7475
"components.icons.hugeicon": ["hi", "icon"],
76+
"components.icons.simple_icon": ["simple_icon"],
7577
"components.icons.others": ["spinner"],
7678
"utils.twmerge": ["cn"],
7779
}
@@ -101,6 +103,7 @@ __all__ = [
101103
"preview_card",
102104
"scroll_area",
103105
"select",
106+
"simple_icon",
104107
"skeleton",
105108
"slider",
106109
"spinner",

‎reflex_ui/components/base/context_menu.pyi‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -590,8 +590,8 @@ class ContextMenuRadioGroup(ContextMenuBaseComponent):
590590
on_scroll_end: EventType[()] | None = None,
591591
on_unmount: EventType[()] | None = None,
592592
on_value_change: EventType[()]
593-
| EventType[str | int]
594-
| EventType[str | int, dict]
593+
| EventType[int | str]
594+
| EventType[int | str, dict]
595595
| None = None,
596596
**props,
597597
) -> ContextMenuRadioGroup:

‎reflex_ui/components/base/menu.pyi‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -610,8 +610,8 @@ class MenuRadioGroup(MenuBaseComponent):
610610
on_scroll_end: EventType[()] | None = None,
611611
on_unmount: EventType[()] | None = None,
612612
on_value_change: EventType[()]
613-
| EventType[str | int]
614-
| EventType[str | int, dict]
613+
| EventType[int | str]
614+
| EventType[int | str, dict]
615615
| None = None,
616616
**props,
617617
) -> MenuRadioGroup:

‎reflex_ui/components/icons/hugeicon.pyi‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ class HugeIcon(CoreComponent):
7171
7272
Returns:
7373
The created component.
74+
7475
"""
7576

7677
hi = icon = HugeIcon.create

‎reflex_ui/components/icons/simple_icon.py‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
"""Simple Icon component wrapper for @icons-pack/react-simple-icons."""
2+
3+
import reflex as rx
4+
from reflex.utils.imports import ImportVar
5+
6+
7+
class SimpleIcon(rx.Component):
8+
"""Simple Icon component wrapper for @icons-pack/react-simple-icons."""
9+
10+
library = "@icons-pack/react-simple-icons"
11+
12+
tag = "SiReact"
13+
14+
color: rx.Var[str]
15+
size: rx.Var[int | str]
16+
17+
@classmethod
18+
def create(cls, icon_name: str, **props):
19+
"""Create a SimpleIcon component.
20+
21+
Args:
22+
icon_name: The icon component name (e.g., "SiReact", "SiGithub", "SiPython")
23+
**props: Additional props like size, color
24+
25+
Returns:
26+
The component instance.
27+
"""
28+
instance = super().create(**props)
29+
instance.tag = icon_name
30+
return instance
31+
32+
def add_imports(self):
33+
"""Add the specific icon import."""
34+
return {
35+
self.library: ImportVar(
36+
tag=self.tag,
37+
is_default=False,
38+
)
39+
}
40+
41+
42+
simple_icon = SimpleIcon.create

‎reflex_ui/components/icons/simple_icon.pyi‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
"""Stub file for reflex_ui/components/icons/simple_icon.py"""
2+
3+
# ------------------- DO NOT EDIT ----------------------
4+
# This file was generated by `reflex/utils/pyi_generator.py`!
5+
# ------------------------------------------------------
6+
from collections.abc import Mapping, Sequence
7+
from typing import Any
8+
9+
import reflex as rx
10+
from reflex.components.core.breakpoints import Breakpoints
11+
from reflex.event import EventType, PointerEventInfo
12+
from reflex.vars.base import Var
13+
14+
class SimpleIcon(rx.Component):
15+
@classmethod
16+
def create(
17+
cls,
18+
*children,
19+
color: Var[str] | str | None = None,
20+
size: Var[int | str] | int | str | None = None,
21+
style: Sequence[Mapping[str, Any]]
22+
| Mapping[str, Any]
23+
| Var[Mapping[str, Any]]
24+
| Breakpoints
25+
| None = None,
26+
key: Any | None = None,
27+
id: Any | None = None,
28+
ref: Var | None = None,
29+
class_name: Any | None = None,
30+
custom_attrs: dict[str, Var | Any] | None = None,
31+
on_blur: EventType[()] | None = None,
32+
on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
33+
on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
34+
on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
35+
on_focus: EventType[()] | None = None,
36+
on_mount: EventType[()] | None = None,
37+
on_mouse_down: EventType[()] | None = None,
38+
on_mouse_enter: EventType[()] | None = None,
39+
on_mouse_leave: EventType[()] | None = None,
40+
on_mouse_move: EventType[()] | None = None,
41+
on_mouse_out: EventType[()] | None = None,
42+
on_mouse_over: EventType[()] | None = None,
43+
on_mouse_up: EventType[()] | None = None,
44+
on_scroll: EventType[()] | None = None,
45+
on_scroll_end: EventType[()] | None = None,
46+
on_unmount: EventType[()] | None = None,
47+
**props,
48+
) -> SimpleIcon:
49+
"""Create a SimpleIcon component.
50+
51+
Args:
52+
icon_name: The icon component name (e.g., "SiReact", "SiGithub", "SiPython")
53+
style: The style of the component.
54+
key: A unique key for the component.
55+
id: The id for the component.
56+
ref: The Var to pass as the ref to the component.
57+
class_name: The class name for the component.
58+
custom_attrs: custom attribute
59+
**props: Additional props like size, color
60+
61+
Returns:
62+
The component instance.
63+
"""
64+
65+
def add_imports(self): ...
66+
67+
simple_icon = SimpleIcon.create

0 commit comments

Comments
 (0)