Skip to content

Commit 1e3972a

Browse files
TheOrcDevTheOrcDev
authored
Refactor/icons (#337)
* refactor: replace lucide-react icons with SVGs in various components for improved performance and consistency * refactor: remove unused lucide-react icons from main menu component
1 parent b193676 commit 1e3972a

File tree

6 files changed

+394
-108
lines changed

6 files changed

+394
-108
lines changed

‎app/blocks/charts/charts.tsx‎

Lines changed: 129 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Users } from "lucide-react";
2-
31
import { ChartExample } from "@/components/ui/8bit/blocks/chart";
42
import ChartAreaStep from "@/components/ui/8bit/blocks/chart-area-step";
53
import ChartBarMultiple from "@/components/ui/8bit/blocks/chart-bar";
@@ -36,7 +34,49 @@ export default function ChartsBlocks() {
3634
<CardTitle className="text-sm font-medium">
3735
Total visitors in the last 6 months
3836
</CardTitle>
39-
<Users className="size-4 text-muted-foreground" />
37+
<svg
38+
width="50"
39+
height="50"
40+
viewBox="0 0 256 256"
41+
fill="currentColor"
42+
xmlns="http://www.w3.org/2000/svg"
43+
stroke="currentColor"
44+
strokeWidth="0.25"
45+
className="size-6"
46+
aria-label="user"
47+
>
48+
<rect x="64" y="144" width="14" height="14" rx="1"></rect>
49+
<rect x="96" y="80" width="14" height="14" rx="1"></rect>
50+
<rect x="144" y="80" width="14" height="14" rx="1"></rect>
51+
<rect x="192" y="192" width="14" height="14" rx="1"></rect>
52+
<rect x="176" y="192" width="14" height="14" rx="1"></rect>
53+
<rect x="64" y="192" width="14" height="14" rx="1"></rect>
54+
<rect x="48" y="176" width="14" height="14" rx="1"></rect>
55+
<rect x="48" y="192" width="14" height="14" rx="1"></rect>
56+
<rect x="192" y="160" width="14" height="14" rx="1"></rect>
57+
<rect x="176" y="144" width="14" height="14" rx="1"></rect>
58+
<rect x="192" y="176" width="14" height="14" rx="1"></rect>
59+
<rect x="48" y="160" width="14" height="14" rx="1"></rect>
60+
<rect x="96" y="64" width="14" height="14" rx="1"></rect>
61+
<rect x="112" y="48" width="14" height="14" rx="1"></rect>
62+
<rect x="128" y="48" width="14" height="14" rx="1"></rect>
63+
<rect x="144" y="64" width="14" height="14" rx="1"></rect>
64+
<rect x="144" y="64" width="14" height="14" rx="1"></rect>
65+
<rect x="112" y="96" width="14" height="14" rx="1"></rect>
66+
<rect x="128" y="96" width="14" height="14" rx="1"></rect>
67+
<rect x="80" y="144" width="14" height="14" rx="1"></rect>
68+
<rect x="96" y="144" width="14" height="14" rx="1"></rect>
69+
<rect x="112" y="144" width="14" height="14" rx="1"></rect>
70+
<rect x="128" y="144" width="14" height="14" rx="1"></rect>
71+
<rect x="144" y="144" width="14" height="14" rx="1"></rect>
72+
<rect x="160" y="144" width="14" height="14" rx="1"></rect>
73+
<rect x="80" y="192" width="14" height="14" rx="1"></rect>
74+
<rect x="96" y="192" width="14" height="14" rx="1"></rect>
75+
<rect x="112" y="192" width="14" height="14" rx="1"></rect>
76+
<rect x="128" y="192" width="14" height="14" rx="1"></rect>
77+
<rect x="144" y="192" width="14" height="14" rx="1"></rect>
78+
<rect x="160" y="192" width="14" height="14" rx="1"></rect>
79+
</svg>
4080
</CardHeader>
4181
<CardContent>
4282
<ChartExample />
@@ -64,7 +104,49 @@ export default function ChartsBlocks() {
64104
<CardTitle className="text-sm font-medium">
65105
Total visitors in the last 6 months
66106
</CardTitle>
67-
<Users className="size-4 text-muted-foreground" />
107+
<svg
108+
width="50"
109+
height="50"
110+
viewBox="0 0 256 256"
111+
fill="currentColor"
112+
xmlns="http://www.w3.org/2000/svg"
113+
stroke="currentColor"
114+
strokeWidth="0.25"
115+
className="size-6"
116+
aria-label="user"
117+
>
118+
<rect x="64" y="144" width="14" height="14" rx="1"></rect>
119+
<rect x="96" y="80" width="14" height="14" rx="1"></rect>
120+
<rect x="144" y="80" width="14" height="14" rx="1"></rect>
121+
<rect x="192" y="192" width="14" height="14" rx="1"></rect>
122+
<rect x="176" y="192" width="14" height="14" rx="1"></rect>
123+
<rect x="64" y="192" width="14" height="14" rx="1"></rect>
124+
<rect x="48" y="176" width="14" height="14" rx="1"></rect>
125+
<rect x="48" y="192" width="14" height="14" rx="1"></rect>
126+
<rect x="192" y="160" width="14" height="14" rx="1"></rect>
127+
<rect x="176" y="144" width="14" height="14" rx="1"></rect>
128+
<rect x="192" y="176" width="14" height="14" rx="1"></rect>
129+
<rect x="48" y="160" width="14" height="14" rx="1"></rect>
130+
<rect x="96" y="64" width="14" height="14" rx="1"></rect>
131+
<rect x="112" y="48" width="14" height="14" rx="1"></rect>
132+
<rect x="128" y="48" width="14" height="14" rx="1"></rect>
133+
<rect x="144" y="64" width="14" height="14" rx="1"></rect>
134+
<rect x="144" y="64" width="14" height="14" rx="1"></rect>
135+
<rect x="112" y="96" width="14" height="14" rx="1"></rect>
136+
<rect x="128" y="96" width="14" height="14" rx="1"></rect>
137+
<rect x="80" y="144" width="14" height="14" rx="1"></rect>
138+
<rect x="96" y="144" width="14" height="14" rx="1"></rect>
139+
<rect x="112" y="144" width="14" height="14" rx="1"></rect>
140+
<rect x="128" y="144" width="14" height="14" rx="1"></rect>
141+
<rect x="144" y="144" width="14" height="14" rx="1"></rect>
142+
<rect x="160" y="144" width="14" height="14" rx="1"></rect>
143+
<rect x="80" y="192" width="14" height="14" rx="1"></rect>
144+
<rect x="96" y="192" width="14" height="14" rx="1"></rect>
145+
<rect x="112" y="192" width="14" height="14" rx="1"></rect>
146+
<rect x="128" y="192" width="14" height="14" rx="1"></rect>
147+
<rect x="144" y="192" width="14" height="14" rx="1"></rect>
148+
<rect x="160" y="192" width="14" height="14" rx="1"></rect>
149+
</svg>
68150
</CardHeader>
69151
<CardContent>
70152
<ChartBarMultiple />
@@ -92,7 +174,49 @@ export default function ChartsBlocks() {
92174
<CardTitle className="text-sm font-medium">
93175
Total visitors in the last 6 months
94176
</CardTitle>
95-
<Users className="size-4 text-muted-foreground" />
177+
<svg
178+
width="50"
179+
height="50"
180+
viewBox="0 0 256 256"
181+
fill="currentColor"
182+
xmlns="http://www.w3.org/2000/svg"
183+
stroke="currentColor"
184+
strokeWidth="0.25"
185+
className="size-6"
186+
aria-label="user"
187+
>
188+
<rect x="64" y="144" width="14" height="14" rx="1"></rect>
189+
<rect x="96" y="80" width="14" height="14" rx="1"></rect>
190+
<rect x="144" y="80" width="14" height="14" rx="1"></rect>
191+
<rect x="192" y="192" width="14" height="14" rx="1"></rect>
192+
<rect x="176" y="192" width="14" height="14" rx="1"></rect>
193+
<rect x="64" y="192" width="14" height="14" rx="1"></rect>
194+
<rect x="48" y="176" width="14" height="14" rx="1"></rect>
195+
<rect x="48" y="192" width="14" height="14" rx="1"></rect>
196+
<rect x="192" y="160" width="14" height="14" rx="1"></rect>
197+
<rect x="176" y="144" width="14" height="14" rx="1"></rect>
198+
<rect x="192" y="176" width="14" height="14" rx="1"></rect>
199+
<rect x="48" y="160" width="14" height="14" rx="1"></rect>
200+
<rect x="96" y="64" width="14" height="14" rx="1"></rect>
201+
<rect x="112" y="48" width="14" height="14" rx="1"></rect>
202+
<rect x="128" y="48" width="14" height="14" rx="1"></rect>
203+
<rect x="144" y="64" width="14" height="14" rx="1"></rect>
204+
<rect x="144" y="64" width="14" height="14" rx="1"></rect>
205+
<rect x="112" y="96" width="14" height="14" rx="1"></rect>
206+
<rect x="128" y="96" width="14" height="14" rx="1"></rect>
207+
<rect x="80" y="144" width="14" height="14" rx="1"></rect>
208+
<rect x="96" y="144" width="14" height="14" rx="1"></rect>
209+
<rect x="112" y="144" width="14" height="14" rx="1"></rect>
210+
<rect x="128" y="144" width="14" height="14" rx="1"></rect>
211+
<rect x="144" y="144" width="14" height="14" rx="1"></rect>
212+
<rect x="160" y="144" width="14" height="14" rx="1"></rect>
213+
<rect x="80" y="192" width="14" height="14" rx="1"></rect>
214+
<rect x="96" y="192" width="14" height="14" rx="1"></rect>
215+
<rect x="112" y="192" width="14" height="14" rx="1"></rect>
216+
<rect x="128" y="192" width="14" height="14" rx="1"></rect>
217+
<rect x="144" y="192" width="14" height="14" rx="1"></rect>
218+
<rect x="160" y="192" width="14" height="14" rx="1"></rect>
219+
</svg>
96220
</CardHeader>
97221
<CardContent>
98222
<ChartAreaStep />

‎app/docs/components/command/page.tsx‎

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,6 @@ export default function CommandPage() {
6565
<CodeSnippet>{`"use client"
6666
6767
import * as React from "react"
68-
import {
69-
Calculator,
70-
Calendar,
71-
CreditCard,
72-
Settings,
73-
Smile,
74-
User,
75-
} from "lucide-react"
7668
7769
import {
7870
Command,
@@ -89,28 +81,19 @@ const suggestionCommands = [
8981
{
9082
value: "Calendar",
9183
symbol: (
92-
<>
93-
<Calendar />
94-
<span>Calendar</span>
95-
</>
84+
<span>Calendar</span>
9685
),
9786
},
9887
{
9988
value: "Search Emoji",
10089
symbol: (
101-
<>
102-
<Smile />
103-
<span>Search Emoji</span>
104-
</>
90+
<span>Search Emoji</span>
10591
),
10692
},
10793
{
10894
value: "Calculator",
10995
symbol: (
110-
<>
111-
<Calculator />
112-
<span>Calculator</span>
113-
</>
96+
<span>Calculator</span>
11497
),
11598
},
11699
]
@@ -119,30 +102,21 @@ const settingCommands = [
119102
{
120103
value: "Profile",
121104
symbol: (
122-
<>
123-
<User />
124-
<span>Profile</span>
125-
</>
105+
<span>Profile</span>
126106
),
127107
shortcut: "⌘P",
128108
},
129109
{
130110
value: "Billing",
131111
symbol: (
132-
<>
133-
<CreditCard />
134-
<span>Billing</span>
135-
</>
112+
<span>Billing</span>
136113
),
137114
shortcut: "⌘B",
138115
},
139116
{
140117
value: "Settings",
141118
symbol: (
142-
<>
143-
<Settings />
144-
<span>Settings</span>
145-
</>
119+
<span>Settings</span>
146120
),
147121
shortcut: "⌘S",
148122
},

‎components/examples/command.tsx‎

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -25,62 +25,32 @@ import {
2525
const suggestionCommands = [
2626
{
2727
value: "Calendar",
28-
symbol: (
29-
<>
30-
<Calendar />
31-
<span>Calendar</span>
32-
</>
33-
),
28+
symbol: <span>Calendar</span>,
3429
},
3530
{
3631
value: "Search Emoji",
37-
symbol: (
38-
<>
39-
<Smile />
40-
<span>Search Emoji</span>
41-
</>
42-
),
32+
symbol: <span>Search Emoji</span>,
4333
},
4434
{
4535
value: "Calculator",
46-
symbol: (
47-
<>
48-
<Calculator />
49-
<span>Calculator</span>
50-
</>
51-
),
36+
symbol: <span>Calculator</span>,
5237
},
5338
];
5439

5540
const settingCommands = [
5641
{
5742
value: "Profile",
58-
symbol: (
59-
<>
60-
<User />
61-
<span>Profile</span>
62-
</>
63-
),
43+
symbol: <span>Profile</span>,
6444
shortcut: "⌘P",
6545
},
6646
{
6747
value: "Billing",
68-
symbol: (
69-
<>
70-
<CreditCard />
71-
<span>Billing</span>
72-
</>
73-
),
48+
symbol: <span>Billing</span>,
7449
shortcut: "⌘B",
7550
},
7651
{
7752
value: "Settings",
78-
symbol: (
79-
<>
80-
<Settings />
81-
<span>Settings</span>
82-
</>
83-
),
53+
symbol: <span>Settings</span>,
8454
shortcut: "⌘S",
8555
},
8656
];

0 commit comments

Comments
 (0)