Skip to main content

ui_storybook/components/primitives/
nav_icons.rs

1//! Lucide-style SVG icons for the navigation rail. Paint with
2//! `currentColor`. Path data copied verbatim from upstream lucide.
3
4use leptos::prelude::*;
5
6/// Filled disc — Record.
7#[component]
8pub fn CircleDot(#[prop(optional)] size: Option<u16>) -> impl IntoView {
9    let size = size.unwrap_or(20);
10    view! {
11        <svg
12            class="lucide lucide-circle-dot"
13            width=size
14            height=size
15            viewBox="0 0 24 24"
16            fill="currentColor"
17            stroke="none"
18            aria-hidden="true"
19        >
20            <circle cx="12" cy="12" r="9" />
21        </svg>
22    }
23}
24
25/// Lucide `folder` — Library.
26#[component]
27pub fn Folder(#[prop(optional)] size: Option<u16>) -> impl IntoView {
28    let size = size.unwrap_or(20);
29    view! {
30        <svg
31            class="lucide lucide-folder"
32            width=size
33            height=size
34            viewBox="0 0 24 24"
35            fill="none"
36            stroke="currentColor"
37            stroke-width="2"
38            stroke-linecap="round"
39            stroke-linejoin="round"
40            aria-hidden="true"
41        >
42            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
43        </svg>
44    }
45}
46
47/// Lucide `layout-panel-top` — Editor.
48#[component]
49pub fn LayoutPanelTop(#[prop(optional)] size: Option<u16>) -> impl IntoView {
50    let size = size.unwrap_or(20);
51    view! {
52        <svg
53            class="lucide lucide-layout-panel-top"
54            width=size
55            height=size
56            viewBox="0 0 24 24"
57            fill="none"
58            stroke="currentColor"
59            stroke-width="2"
60            stroke-linecap="round"
61            stroke-linejoin="round"
62            aria-hidden="true"
63        >
64            <rect width="18" height="7" x="3" y="3" rx="1" />
65            <rect width="7" height="7" x="3" y="14" rx="1" />
66            <rect width="7" height="7" x="14" y="14" rx="1" />
67        </svg>
68    }
69}
70
71/// Lucide `mouse-pointer-2` — Cursor.
72#[component]
73pub fn MousePointer2(#[prop(optional)] size: Option<u16>) -> impl IntoView {
74    let size = size.unwrap_or(20);
75    view! {
76        <svg
77            class="lucide lucide-mouse-pointer-2"
78            width=size
79            height=size
80            viewBox="0 0 24 24"
81            fill="none"
82            stroke="currentColor"
83            stroke-width="2"
84            stroke-linecap="round"
85            stroke-linejoin="round"
86            aria-hidden="true"
87        >
88            <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
89        </svg>
90    }
91}
92
93/// Lucide `settings` — Prefs.
94#[component]
95pub fn Settings(#[prop(optional)] size: Option<u16>) -> impl IntoView {
96    let size = size.unwrap_or(20);
97    view! {
98        <svg
99            class="lucide lucide-settings"
100            width=size
101            height=size
102            viewBox="0 0 24 24"
103            fill="none"
104            stroke="currentColor"
105            stroke-width="2"
106            stroke-linecap="round"
107            stroke-linejoin="round"
108            aria-hidden="true"
109        >
110            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
111            <circle cx="12" cy="12" r="3" />
112        </svg>
113    }
114}