Skip to content

Commit 807ff1d

Browse files
indrazmindrazm
authored
Merge pull request #88 from indrazm/improve-icons
refactor(icons): replace lucide-react with hugeicons in all components
2 parents 0a9452f + b42ba04 commit 807ff1d

File tree

56 files changed

+877
-409
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+877
-409
lines changed

‎apps/admin/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"@dnd-kit/core": "^6.3.1",
1616
"@dnd-kit/sortable": "^10.0.0",
1717
"@dnd-kit/utilities": "^3.2.2",
18+
"@hugeicons/core-free-icons": "^2.0.0",
19+
"@hugeicons/react": "^1.1.1",
1820
"@opencircle/core": "workspace:*",
1921
"@opencircle/ui": "workspace:*",
2022
"@tailwindcss/vite": "^4.1.14",
@@ -28,7 +30,6 @@
2830
"emoji-picker-react": "^4.14.2",
2931
"jotai": "^2.15.0",
3032
"ky": "^1.12.0",
31-
"lucide-react": "^0.546.0",
3233
"moment": "^2.30.1",
3334
"radix-ui": "^1.4.3",
3435
"react": "^19.1.1",

‎apps/admin/src/components/sidebar.tsx‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
1+
import {
2+
Activity01Icon,
3+
ArrowDown01Icon,
4+
Book01Icon,
5+
Key01Icon,
6+
LinkSquare02Icon,
7+
Logout01Icon,
8+
Mail01Icon,
9+
News01Icon,
10+
Settings01Icon,
11+
UserCheck01Icon,
12+
UserMultiple02Icon,
13+
ZapIcon,
14+
} from "@hugeicons/core-free-icons";
15+
import { HugeiconsIcon } from "@hugeicons/react";
116
import { Avatar } from "@opencircle/ui";
217
import { Link } from "@tanstack/react-router";
3-
import {
4-
Activity,
5-
BookOpen,
6-
ChevronDown,
7-
ExternalLink,
8-
FileText,
9-
Hash,
10-
Key,
11-
Link as LinkIcon,
12-
LogOut,
13-
Mail,
14-
Settings,
15-
UserCheck,
16-
Users,
17-
Zap,
18-
} from "lucide-react";
1918
import { Accordion } from "radix-ui";
2019
import { useAccount } from "../features/auth/hooks/useAccount";
2120
import { clearTokens } from "../utils/api";
@@ -50,7 +49,8 @@ const MenuGroup = ({ value, label, children }: MenuGroupProps) => {
5049
<Accordion.Header>
5150
<Accordion.Trigger className="group flex w-full items-center justify-between rounded-lg p-2 font-medium text-foreground/70 text-sm transition duration-150 hover:bg-primary hover:text-foreground">
5251
<span>{label}</span>
53-
<ChevronDown
52+
<HugeiconsIcon
53+
icon={ArrowDown01Icon}
5454
size={16}
5555
className="transition-transform duration-200 group-data-[state=open]:rotate-180"
5656
/>
@@ -76,7 +76,7 @@ export const Sidebar = () => {
7676
<div>
7777
<section className="ml-2 flex gap-2">
7878
<div className="flex h-6 w-6 items-center justify-center rounded-lg bg-foreground text-background">
79-
<Zap size={12} fill="currentColor" />
79+
<HugeiconsIcon icon={ZapIcon} size={12} />
8080
</div>
8181
<Link to="/dashboard">
8282
<h2 className="font-medium">Opencircle</h2>
@@ -90,57 +90,61 @@ export const Sidebar = () => {
9090
>
9191
<MenuGroup value="community" label="Community">
9292
<MenuItem
93-
icon={<Activity size={18} />}
93+
icon={<HugeiconsIcon icon={Activity01Icon} size={18} />}
9494
label="Activity"
9595
to="/activity"
9696
/>
97-
<MenuItem icon={<Users size={18} />} label="Users" to="/users" />
9897
<MenuItem
99-
icon={<Hash size={18} />}
98+
icon={<HugeiconsIcon icon={UserMultiple02Icon} size={18} />}
99+
label="Users"
100+
to="/users"
101+
/>
102+
<MenuItem
103+
icon={<span className="text-lg">#</span>}
100104
label="Channels"
101105
to="/channels"
102106
/>
103107
<MenuItem
104-
icon={<Key size={18} />}
108+
icon={<HugeiconsIcon icon={Key01Icon} size={18} />}
105109
label="Invite Codes"
106110
to="/invite-codes"
107111
/>
108112
<MenuItem
109-
icon={<Mail size={18} />}
113+
icon={<HugeiconsIcon icon={Mail01Icon} size={18} />}
110114
label="Broadcast"
111115
to="/broadcast"
112116
/>
113117
</MenuGroup>
114118
<MenuGroup value="content" label="Content">
115119
<MenuItem
116-
icon={<BookOpen size={18} />}
120+
icon={<HugeiconsIcon icon={Book01Icon} size={18} />}
117121
label="Courses"
118122
to="/courses"
119123
/>
120124
<MenuItem
121-
icon={<UserCheck size={18} />}
125+
icon={<HugeiconsIcon icon={UserCheck01Icon} size={18} />}
122126
label="Enrollments"
123127
to="/enrollments"
124128
/>
125129
<MenuItem
126-
icon={<FileText size={18} />}
130+
icon={<HugeiconsIcon icon={News01Icon} size={18} />}
127131
label="Articles"
128132
to="/articles"
129133
/>
130134
<MenuItem
131-
icon={<LinkIcon size={18} />}
135+
icon={<HugeiconsIcon icon={LinkSquare02Icon} size={18} />}
132136
label="Resources"
133137
to="/resources"
134138
/>
135139
</MenuGroup>
136140
<MenuGroup value="settings" label="Settings">
137141
<MenuItem
138-
icon={<ExternalLink size={18} />}
142+
icon={<HugeiconsIcon icon={LinkSquare02Icon} size={18} />}
139143
label="App Links"
140144
to="/app-links"
141145
/>
142146
<MenuItem
143-
icon={<Settings size={18} />}
147+
icon={<HugeiconsIcon icon={Settings01Icon} size={18} />}
144148
label="App Settings"
145149
to="/app-settings"
146150
/>
@@ -207,7 +211,7 @@ export const Sidebar = () => {
207211
onClick={handleLogout}
208212
className="flex w-full items-center gap-2 rounded-lg p-2 text-foreground/70 text-sm hover:bg-primary hover:text-foreground"
209213
>
210-
<LogOut size={16} />
214+
<HugeiconsIcon icon={Logout01Icon} size={16} />
211215
<span>Logout</span>
212216
</button>
213217
</section>

‎apps/admin/src/features/app-links/components/appLinksList.tsx‎

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import {
2+
ArrowDown01Icon,
3+
ArrowUp01Icon,
4+
ArrowUpDownIcon,
5+
Delete01Icon,
6+
Link01Icon,
7+
Search01Icon,
8+
} from "@hugeicons/core-free-icons";
9+
import { HugeiconsIcon } from "@hugeicons/react";
110
import type { AppLink } from "@opencircle/core";
211
import { Button, Input } from "@opencircle/ui";
312
import {
@@ -10,14 +19,6 @@ import {
1019
useReactTable,
1120
} from "@tanstack/react-table";
1221
import { format } from "date-fns";
13-
import {
14-
ArrowDown,
15-
ArrowUp,
16-
ArrowUpDown,
17-
ExternalLink,
18-
Search,
19-
Trash2,
20-
} from "lucide-react";
2122
import { useMemo, useState } from "react";
2223

2324
interface AppLinksListProps {
@@ -45,11 +46,15 @@ export const AppLinksList = ({
4546
>
4647
Label
4748
{column.getIsSorted() === "asc" ? (
48-
<ArrowUp size={14} />
49+
<HugeiconsIcon icon={ArrowUp01Icon} size={14} />
4950
) : column.getIsSorted() === "desc" ? (
50-
<ArrowDown size={14} />
51+
<HugeiconsIcon icon={ArrowDown01Icon} size={14} />
5152
) : (
52-
<ArrowUpDown size={14} className="opacity-50" />
53+
<HugeiconsIcon
54+
icon={ArrowUpDownIcon}
55+
size={14}
56+
className="opacity-50"
57+
/>
5358
)}
5459
</button>
5560
);
@@ -70,11 +75,15 @@ export const AppLinksList = ({
7075
>
7176
URL
7277
{column.getIsSorted() === "asc" ? (
73-
<ArrowUp size={14} />
78+
<HugeiconsIcon icon={ArrowUp01Icon} size={14} />
7479
) : column.getIsSorted() === "desc" ? (
75-
<ArrowDown size={14} />
80+
<HugeiconsIcon icon={ArrowDown01Icon} size={14} />
7681
) : (
77-
<ArrowUpDown size={14} className="opacity-50" />
82+
<HugeiconsIcon
83+
icon={ArrowUpDownIcon}
84+
size={14}
85+
className="opacity-50"
86+
/>
7887
)}
7988
</button>
8089
);
@@ -89,7 +98,11 @@ export const AppLinksList = ({
8998
className="flex items-center gap-2 text-primary text-sm hover:underline"
9099
>
91100
<span className="max-w-xs truncate">{url}</span>
92-
<ExternalLink size={14} className="flex-shrink-0" />
101+
<HugeiconsIcon
102+
icon={Link01Icon}
103+
size={14}
104+
className="flex-shrink-0"
105+
/>
93106
</a>
94107
);
95108
},
@@ -105,11 +118,15 @@ export const AppLinksList = ({
105118
>
106119
Created
107120
{column.getIsSorted() === "asc" ? (
108-
<ArrowUp size={14} />
121+
<HugeiconsIcon icon={ArrowUp01Icon} size={14} />
109122
) : column.getIsSorted() === "desc" ? (
110-
<ArrowDown size={14} />
123+
<HugeiconsIcon icon={ArrowDown01Icon} size={14} />
111124
) : (
112-
<ArrowUpDown size={14} className="opacity-50" />
125+
<HugeiconsIcon
126+
icon={ArrowUpDownIcon}
127+
size={14}
128+
className="opacity-50"
129+
/>
113130
)}
114131
</button>
115132
);
@@ -140,7 +157,7 @@ export const AppLinksList = ({
140157
variant="secondary"
141158
onClick={() => onDelete(appLink.id)}
142159
>
143-
<Trash2 size={14} />
160+
<HugeiconsIcon icon={Delete01Icon} size={14} />
144161
Delete
145162
</Button>
146163
)}
@@ -205,7 +222,11 @@ export const AppLinksList = ({
205222
{/* Search Input */}
206223
<div className="relative">
207224
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
208-
<Search size={16} className="text-foreground/40" />
225+
<HugeiconsIcon
226+
icon={Search01Icon}
227+
size={16}
228+
className="text-foreground/40"
229+
/>
209230
</div>
210231
<Input
211232
type="text"

‎apps/admin/src/features/app-links/components/createAppLinkDialog.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Add01Icon } from "@hugeicons/core-free-icons";
2+
import { HugeiconsIcon } from "@hugeicons/react";
13
import {
24
Button,
35
Dialog,
@@ -9,7 +11,6 @@ import {
911
DialogTrigger,
1012
Input,
1113
} from "@opencircle/ui";
12-
import { Plus } from "lucide-react";
1314
import { useId, useState } from "react";
1415
import { useAppLinksCreation } from "../hooks/useAppLinksCreation";
1516
import type { AppLinksFormData } from "../utils/types";
@@ -57,7 +58,7 @@ export const CreateAppLinkDialog = ({ children }: CreateAppLinkDialogProps) => {
5758
<DialogTrigger asChild>
5859
{children || (
5960
<Button size="sm">
60-
<Plus className="mr-2 h-4 w-4" />
61+
<HugeiconsIcon icon={Add01Icon} className="mr-2 h-4 w-4" />
6162
Add App Link
6263
</Button>
6364
)}

‎apps/admin/src/features/appSettings/components/appSettings.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1+
import {
2+
Cancel01Icon,
3+
FloppyDiskIcon,
4+
Settings01Icon,
5+
Upload01Icon,
6+
} from "@hugeicons/core-free-icons";
7+
import { HugeiconsIcon } from "@hugeicons/react";
18
import type { AppSettingsUpdate } from "@opencircle/core";
29
import { Button, Input } from "@opencircle/ui";
3-
import { Save, Settings, Upload, X } from "lucide-react";
410
import { useEffect, useId, useState } from "react";
511
import toast from "react-hot-toast";
612
import { api } from "../../../utils/api";
@@ -110,7 +116,7 @@ export function AppSettings() {
110116
<main className="max-w-4xl p-6">
111117
<div className="mb-6">
112118
<h1 className="flex items-center gap-2 font-medium text-2xl">
113-
<Settings className="h-6 w-6" />
119+
<HugeiconsIcon icon={Settings01Icon} size={24} className="h-6 w-6" />
114120
App Settings
115121
</h1>
116122
<p className="mt-1 text-muted-foreground">
@@ -154,7 +160,11 @@ export function AppSettings() {
154160
{isUploadingLogo ? (
155161
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
156162
) : (
157-
<Upload className="h-4 w-4" />
163+
<HugeiconsIcon
164+
icon={Upload01Icon}
165+
size={16}
166+
className="h-4 w-4"
167+
/>
158168
)}
159169
{isUploadingLogo ? "Uploading..." : "Upload Logo"}
160170
</Button>
@@ -174,7 +184,11 @@ export function AppSettings() {
174184
className="h-16 w-16 rounded border object-contain"
175185
/>
176186
<Button type="button" size="sm" onClick={handleDeleteLogo}>
177-
<X className="h-4 w-4" />
187+
<HugeiconsIcon
188+
icon={Cancel01Icon}
189+
size={16}
190+
className="h-4 w-4"
191+
/>
178192
</Button>
179193
</div>
180194
)}
@@ -225,7 +239,11 @@ export function AppSettings() {
225239
</>
226240
) : (
227241
<>
228-
<Save className="mr-2 h-4 w-4" />
242+
<HugeiconsIcon
243+
icon={FloppyDiskIcon}
244+
size={16}
245+
className="mr-2 h-4 w-4"
246+
/>
229247
Save Changes
230248
</>
231249
)}

‎apps/admin/src/features/articles/components/articleEditor.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
import {
2+
FloppyDiskIcon,
3+
ViewIcon,
4+
ViewOffIcon,
5+
} from "@hugeicons/core-free-icons";
6+
import { HugeiconsIcon } from "@hugeicons/react";
17
import { Button, Input } from "@opencircle/ui";
28
import MDEditor from "@uiw/react-md-editor";
3-
import { Eye, EyeOff, Save } from "lucide-react";
49
import { useState } from "react";
510
import type {
611
CreateArticleRequest,
@@ -66,7 +71,7 @@ export const ArticleEditor = ({
6671
type="submit"
6772
disabled={loading || !title.trim() || !content.trim()}
6873
>
69-
<Save size={16} className="mr-2" />
74+
<HugeiconsIcon icon={FloppyDiskIcon} size={16} className="mr-2" />
7075
{loading ? "Saving..." : "Save"}
7176
</Button>
7277
</div>
@@ -97,9 +102,13 @@ export const ArticleEditor = ({
97102
onClick={() => setShowPreview(!showPreview)}
98103
>
99104
{showPreview ? (
100-
<EyeOff size={14} className="mr-1" />
105+
<HugeiconsIcon
106+
icon={ViewOffIcon}
107+
size={14}
108+
className="mr-1"
109+
/>
101110
) : (
102-
<Eye size={14} className="mr-1" />
111+
<HugeiconsIcon icon={ViewIcon} size={14} className="mr-1" />
103112
)}
104113
{showPreview ? "Edit" : "Preview"}
105114
</Button>

0 commit comments

Comments
 (0)