Skip to content

Commit 2cf620b

Browse files
productdevbookproductdevbook
committed
refactor: replace lucide-vue-next icons with new Icon component across multiple pages
- Updated icon imports and usage in apns.vue, fcm.vue, index.vue, webpush.vue, settings.vue, and devices.vue to use the new Icon component. - Removed unused icon imports to clean up the code. - Ensured consistent icon sizes and styles throughout the application.
1 parent d2e1de0 commit 2cf620b

22 files changed

+168
-211
lines changed

‎app/components/AppSidebar.vue‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,6 @@ import {
99
SidebarMenuButton,
1010
SidebarMenuItem,
1111
} from 'abckit/shadcn/sidebar'
12-
import {
13-
BarChart3,
14-
Bell,
15-
FileText,
16-
Github,
17-
Home,
18-
Package,
19-
Send,
20-
Smartphone,
21-
Zap,
22-
} from 'lucide-vue-next'
2312
import AppNavMain from '~/components/app/AppNavMain.vue'
2413
import AppNavUser from '~/components/app/AppNavUser.vue'
2514
@@ -34,19 +23,19 @@ const navMain = computed(() => [
3423
{
3524
title: 'Dashboard',
3625
url: '/',
37-
icon: Home,
26+
icon: 'lucide:home',
3827
isActive: route.path === '/',
3928
},
4029
{
4130
title: 'Applications',
4231
url: '/apps',
43-
icon: Package,
32+
icon: 'lucide:package',
4433
isActive: route.path.startsWith('/apps'),
4534
},
4635
{
4736
title: 'Analytics',
4837
url: '/analytics',
49-
icon: BarChart3,
38+
icon: 'lucide:bar-chart-3',
5039
isActive: route.path.startsWith('/analytics'),
5140
},
5241
])
@@ -55,19 +44,19 @@ const navTools = computed(() => [
5544
{
5645
title: 'Send Notification',
5746
url: '/send',
58-
icon: Send,
47+
icon: 'lucide:send',
5948
isActive: route.path.startsWith('/send'),
6049
},
6150
{
6251
title: 'Device Testing',
6352
url: '/devices',
64-
icon: Smartphone,
53+
icon: 'lucide:smartphone',
6554
isActive: route.path.startsWith('/devices'),
6655
},
6756
{
6857
title: 'Web Push Test',
6958
url: '/test-webpush',
70-
icon: Bell,
59+
icon: 'lucide:bell',
7160
isActive: route.path.startsWith('/test-webpush'),
7261
},
7362
])
@@ -76,13 +65,13 @@ const navHelp = computed(() => [
7665
{
7766
title: 'Documentation',
7867
url: '/docs',
79-
icon: FileText,
68+
icon: 'lucide:file-text',
8069
isActive: route.path.startsWith('/docs'),
8170
},
8271
{
8372
title: 'GitHub',
8473
url: 'https://github.com/productdevbook/nitroping',
85-
icon: Github,
74+
icon: 'lucide:github',
8675
isActive: false,
8776
},
8877
])
@@ -103,7 +92,7 @@ const userData = computed(() => ({
10392
<SidebarMenuButton size="lg" as-child>
10493
<NuxtLink to="/">
10594
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
106-
<Zap class="size-4" />
95+
<Icon name="lucide:zap" class="size-4" />
10796
</div>
10897
<div class="grid flex-1 text-left text-sm leading-tight">
10998
<span class="truncate font-semibold">NitroPing</span>

‎app/components/app/AppDetailHeader.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
55
import { Input } from 'abckit/shadcn/input'
66
import { Label } from 'abckit/shadcn/label'
77
import { Textarea } from 'abckit/shadcn/textarea'
8-
import { ArrowLeft, Download, Send } from 'lucide-vue-next'
98
109
interface Props {
1110
app: any
@@ -37,7 +36,7 @@ async function sendTestNotification() {
3736
<div class="flex items-center justify-between mb-8">
3837
<div class="flex items-center space-x-4">
3938
<Button variant="ghost" size="icon" @click="$router.back()">
40-
<ArrowLeft class="h-4 w-4" />
39+
<Icon name="lucide:arrow-left" class="size-4" />
4140
</Button>
4241
<div>
4342
<h1 class="text-3xl font-bold mb-1">{{ app.name }}</h1>
@@ -49,11 +48,11 @@ async function sendTestNotification() {
4948
</div>
5049
<div class="flex space-x-2">
5150
<Button variant="outline" @click="showSendTest = true">
52-
<Send class="mr-2 h-4 w-4" />
51+
<Icon name="lucide:send" class="mr-2 size-4" />
5352
Send Test
5453
</Button>
5554
<Button variant="outline">
56-
<Download class="mr-2 h-4 w-4" />
55+
<Icon name="lucide:download" class="mr-2 size-4" />
5756
Export Data
5857
</Button>
5958
</div>

‎app/components/app/AppNavMain.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,11 @@ import {
1414
SidebarMenuSubButton,
1515
SidebarMenuSubItem,
1616
} from 'abckit/shadcn/sidebar'
17-
import { ChevronRight, ExternalLink } from 'lucide-vue-next'
1817
1918
interface MenuItem {
2019
title: string
2120
url: string
22-
icon?: any
21+
icon?: string
2322
isActive: boolean
2423
items?: Array<{
2524
title: string
@@ -45,9 +44,9 @@ defineProps<{
4544
<Collapsible :default-open="item.isActive" class="group/collapsible">
4645
<SidebarMenuButton as-child :tooltip="item.title">
4746
<CollapsibleTrigger class="w-full">
48-
<component :is="item.icon" v-if="item.icon" class="size-4" />
47+
<Icon v-if="item.icon" :name="item.icon" class="size-4" />
4948
<span>{{ item.title }}</span>
50-
<ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
49+
<Icon name="lucide:chevron-right" class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
5150
</CollapsibleTrigger>
5251
</SidebarMenuButton>
5352
<CollapsibleContent>
@@ -69,13 +68,13 @@ defineProps<{
6968
<SidebarMenuButton as-child :is-active="item.isActive" :tooltip="item.title">
7069
<!-- External link -->
7170
<a v-if="item.url.startsWith('http')" :href="item.url" target="_blank" rel="noopener noreferrer">
72-
<component :is="item.icon" v-if="item.icon" class="size-4" />
71+
<Icon v-if="item.icon" :name="item.icon" class="size-4" />
7372
<span>{{ item.title }}</span>
74-
<ExternalLink class="size-3 ml-auto" />
73+
<Icon name="lucide:external-link" class="size-3 ml-auto" />
7574
</a>
7675
<!-- Internal link -->
7776
<NuxtLink v-else :to="item.url">
78-
<component :is="item.icon" v-if="item.icon" class="size-4" />
77+
<Icon v-if="item.icon" :name="item.icon" class="size-4" />
7978
<span>{{ item.title }}</span>
8079
</NuxtLink>
8180
</SidebarMenuButton>

‎app/components/app/AppNavUser.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
SidebarMenuButton,
1515
SidebarMenuItem,
1616
} from 'abckit/shadcn/sidebar'
17-
import { ChevronsUpDown, FileText, LogOut, Settings } from 'lucide-vue-next'
1817
1918
interface User {
2019
name?: string
@@ -62,7 +61,7 @@ function handleLogout() {
6261
<span class="truncate font-semibold">{{ user.name || 'User' }}</span>
6362
<span class="truncate text-xs">{{ user.email || 'No email' }}</span>
6463
</div>
65-
<ChevronsUpDown class="ml-auto size-4" />
64+
<Icon name="lucide:chevrons-up-down" class="ml-auto size-4" />
6665
</SidebarMenuButton>
6766
</DropdownMenuTrigger>
6867
<DropdownMenuContent
@@ -89,20 +88,20 @@ function handleLogout() {
8988
<DropdownMenuGroup>
9089
<DropdownMenuItem as-child>
9190
<NuxtLink to="/settings">
92-
<Settings class="size-4 mr-2" />
91+
<Icon name="lucide:settings" class="size-4 mr-2" />
9392
Settings
9493
</NuxtLink>
9594
</DropdownMenuItem>
9695
<DropdownMenuItem as-child>
9796
<NuxtLink to="/docs">
98-
<FileText class="size-4 mr-2" />
97+
<Icon name="lucide:file-text" class="size-4 mr-2" />
9998
Documentation
10099
</NuxtLink>
101100
</DropdownMenuItem>
102101
</DropdownMenuGroup>
103102
<DropdownMenuSeparator />
104103
<DropdownMenuItem @click="handleLogout">
105-
<LogOut class="size-4 mr-2" />
104+
<Icon name="lucide:log-out" class="size-4 mr-2" />
106105
Log out
107106
</DropdownMenuItem>
108107
</DropdownMenuContent>

‎app/components/app/AppNavigation.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
import { Activity, Cog, Globe, Smartphone, TrendingUp } from 'lucide-vue-next'
3-
42
interface Props {
53
appId: string
64
}
@@ -12,31 +10,31 @@ const navigationItems = [
1210
{
1311
name: 'Overview',
1412
href: `/apps/${_props.appId}`,
15-
icon: TrendingUp,
13+
icon: 'lucide:trending-up',
1614
current: route.path === `/apps/${_props.appId}`,
1715
},
1816
{
1917
name: 'Push Providers',
2018
href: `/apps/${_props.appId}/providers`,
21-
icon: Globe,
19+
icon: 'lucide:globe',
2220
current: route.path === `/apps/${_props.appId}/providers`,
2321
},
2422
{
2523
name: 'Devices',
2624
href: `/apps/${_props.appId}/devices`,
27-
icon: Smartphone,
25+
icon: 'lucide:smartphone',
2826
current: route.path === `/apps/${_props.appId}/devices`,
2927
},
3028
{
3129
name: 'Notifications',
3230
href: `/apps/${_props.appId}/notifications`,
33-
icon: Activity,
31+
icon: 'lucide:activity',
3432
current: route.path === `/apps/${_props.appId}/notifications`,
3533
},
3634
{
3735
name: 'Settings',
3836
href: `/apps/${_props.appId}/settings`,
39-
icon: Cog,
37+
icon: 'lucide:cog',
4038
current: route.path === `/apps/${_props.appId}/settings`,
4139
},
4240
]
@@ -55,7 +53,7 @@ const navigationItems = [
5553
: 'text-muted-foreground border-transparent hover:text-foreground hover:border-border',
5654
]"
5755
>
58-
<component :is="item.icon" class="mr-2 h-4 w-4" />
56+
<Icon :name="item.icon" class="mr-2 size-4" />
5957
{{ item.name }}
6058
</NuxtLink>
6159
</nav>

‎app/components/app/AppPageHeader.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
22
import { Badge } from 'abckit/shadcn/badge'
33
import { Button } from 'abckit/shadcn/button'
4-
import { ArrowLeft } from 'lucide-vue-next'
54
65
interface Props {
76
title: string
@@ -25,7 +24,7 @@ const _emit = defineEmits<{
2524
<div class="mb-8">
2625
<div class="flex items-center space-x-4 mb-4">
2726
<Button v-if="showBackButton" variant="ghost" size="icon" @click="$emit('back')">
28-
<ArrowLeft class="h-4 w-4" />
27+
<Icon name="lucide:arrow-left" class="size-4" />
2928
</Button>
3029
<div class="flex-1">
3130
<div class="flex items-center space-x-3 mb-1">

‎app/components/forms/CreateAppForm.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'abcki
55
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from 'abckit/shadcn/form'
66
import { Input } from 'abckit/shadcn/input'
77
import { Textarea } from 'abckit/shadcn/textarea'
8-
import { Loader2, Plus } from 'lucide-vue-next'
98
import { useForm } from 'vee-validate'
109
import { z } from 'zod'
1110
@@ -139,8 +138,8 @@ watch(() => values.name, (newName) => {
139138
:disabled="isSubmitting || _props.loading"
140139
class="flex-1"
141140
>
142-
<Loader2 v-if="isSubmitting || _props.loading" class="w-4 h-4 mr-2 animate-spin" />
143-
<Plus class="w-4 h-4 mr-2" />
141+
<Icon v-if="isSubmitting || _props.loading" name="lucide:loader-2" class="size-4 mr-2 animate-spin" />
142+
<Icon name="lucide:plus" class="size-4 mr-2" />
144143
Create App
145144
</Button>
146145
<Button type="button" variant="outline" @click="$emit('cancel')">

‎app/layouts/default.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Button } from 'abckit/shadcn/button'
44
import ThemeToggle from 'abckit/shadcn/button/ThemeToggle.vue'
55
import { Separator } from 'abckit/shadcn/separator'
66
import { SidebarInset, SidebarProvider, SidebarTrigger } from 'abckit/shadcn/sidebar'
7-
import { ExternalLink, Search, Zap } from 'lucide-vue-next'
87
98
const route = useRoute()
109
@@ -50,7 +49,7 @@ function handleViewDocs() {
5049
<Breadcrumb>
5150
<BreadcrumbList>
5251
<BreadcrumbItem>
53-
<Zap class="h-4 w-4 mr-1" />
52+
<Icon name="lucide:zap" class="size-4 mr-1" />
5453
NitroPing
5554
</BreadcrumbItem>
5655
<BreadcrumbSeparator />
@@ -62,10 +61,10 @@ function handleViewDocs() {
6261
<div class="flex-1"></div>
6362
<div class="flex items-center space-x-2">
6463
<Button variant="ghost" size="sm">
65-
<Search class="h-4 w-4" />
64+
<Icon name="lucide:search" class="size-4" />
6665
</Button>
6766
<Button variant="outline" size="sm" @click="handleViewDocs">
68-
<ExternalLink class="h-4 w-4 mr-2" />
67+
<Icon name="lucide:external-link" class="size-4 mr-2" />
6968
API Docs
7069
</Button>
7170
<ThemeToggle />

‎app/pages/analytics.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { Button } from 'abckit/shadcn/button'
33
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'abckit/shadcn/card'
44
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'abckit/shadcn/select'
5-
import { BarChart3, CheckCircle, RefreshCw, Send, XCircle } from 'lucide-vue-next'
65
import { useAnalyticsSummary } from '~/graphql/analytics'
76
87
definePageMeta({
@@ -140,7 +139,7 @@ function refreshData() {
140139
<Card>
141140
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
142141
<CardTitle class="text-sm font-medium">Total Sent</CardTitle>
143-
<Send class="h-4 w-4 text-muted-foreground" />
142+
<Icon name="lucide:send" class="size-4 text-muted-foreground" />
144143
</CardHeader>
145144
<CardContent>
146145
<div class="text-2xl font-bold">{{ metrics.totalSent.toLocaleString() }}</div>
@@ -153,7 +152,7 @@ function refreshData() {
153152
<Card>
154153
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
155154
<CardTitle class="text-sm font-medium">Delivered</CardTitle>
156-
<CheckCircle class="h-4 w-4 text-muted-foreground" />
155+
<Icon name="lucide:check-circle" class="size-4 text-muted-foreground" />
157156
</CardHeader>
158157
<CardContent>
159158
<div class="text-2xl font-bold">{{ metrics.delivered.toLocaleString() }}</div>
@@ -166,7 +165,7 @@ function refreshData() {
166165
<Card>
167166
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
168167
<CardTitle class="text-sm font-medium">Opened</CardTitle>
169-
<CheckCircle class="h-4 w-4 text-muted-foreground" />
168+
<Icon name="lucide:check-circle" class="size-4 text-muted-foreground" />
170169
</CardHeader>
171170
<CardContent>
172171
<div class="text-2xl font-bold">{{ metrics.opened.toLocaleString() }}</div>
@@ -179,7 +178,7 @@ function refreshData() {
179178
<Card>
180179
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
181180
<CardTitle class="text-sm font-medium">Clicked</CardTitle>
182-
<XCircle class="h-4 w-4 text-muted-foreground" />
181+
<Icon name="lucide:x-circle" class="size-4 text-muted-foreground" />
183182
</CardHeader>
184183
<CardContent>
185184
<div class="text-2xl font-bold">{{ metrics.clicked.toLocaleString() }}</div>
@@ -200,7 +199,7 @@ function refreshData() {
200199
<CardContent>
201200
<div class="h-80 flex items-center justify-center text-muted-foreground">
202201
<div class="text-center">
203-
<BarChart3 class="h-12 w-12 mx-auto mb-4" />
202+
<Icon name="lucide:bar-chart-3" class="h-12 w-12 mx-auto mb-4" />
204203
<p>Chart visualization would go here</p>
205204
<p class="text-sm">Integration with chart library needed</p>
206205
</div>
@@ -242,14 +241,14 @@ function refreshData() {
242241
<CardDescription>Latest sent notifications and their status</CardDescription>
243242
</div>
244243
<Button variant="outline" @click="refreshData">
245-
<RefreshCw class="w-4 h-4 mr-2" />
244+
<Icon name="lucide:refresh-cw" class="size-4 mr-2" />
246245
Refresh
247246
</Button>
248247
</div>
249248
</CardHeader>
250249
<CardContent>
251250
<div class="text-center py-8 text-muted-foreground">
252-
<BarChart3 class="h-12 w-12 mx-auto mb-4" />
251+
<Icon name="lucide:bar-chart-3" class="h-12 w-12 mx-auto mb-4" />
253252
<p>Recent notifications feature</p>
254253
<p class="text-sm">Coming soon...</p>
255254
</div>

0 commit comments

Comments
 (0)