linx6g/skt-vuetify-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update icon usage to use mdi imports for consistency

Browse Source
This commit is contained in:
skytek_xinliang
2026-03-26 11:48:05 +08:00
parent 069141794e
commit ec3fbace1a
50 changed files with 454 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue
+11 -10
View File
@@ -1,6 +1,6 @@
<template>
<v-col class="d-flex align-center bg-surface pr-2 pl-2 pl-m-3 py-1">
<v-btn v-if="isMobile" icon="mdi-menu" size="small" variant="text" @click="emit('toggle-drawer')"></v-btn>
<v-btn v-if="isMobile" :icon="mdiMenu" size="small" variant="text" @click="emit('toggle-drawer')"></v-btn>
<div v-if="features.showSearch" class="search-input-wrapper">
<v-text-field
@@ -8,7 +8,7 @@ v-model="searchValueModel" :aria-label="searchConfig.label" class="search-input"
hide-details :placeholder="searchConfig.placeholder" variant="outlined"
@keyup.enter="triggerSearch">
<template v-if="!isMobile" #prepend-inner>
<v-icon size="small">mdi-magnify</v-icon>
<v-icon size="small" :icon="mdiMagnify" />
</template>
<template #append-inner>
<v-btn :aria-label="searchConfig.label" color="primary" size="small" variant="text" @click="triggerSearch">
@@ -30,9 +30,9 @@ v-bind="props" :aria-label="toolbarActions.notificationsLabel" icon size="small"
<v-badge
v-if="toolbarCounts.notifications" color="error" :content="toolbarCounts.notifications"
offset-x="4" offset-y="-2">
<v-icon>mdi-bell-outline</v-icon>
<v-icon :icon="mdiBellOutline" />
</v-badge>
<v-icon v-else>mdi-bell-outline</v-icon>
<v-icon v-else :icon="mdiBellOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -46,9 +46,9 @@ v-bind="props" :aria-label="toolbarActions.messagesLabel" icon size="small" vari
<v-badge
v-if="toolbarCounts.messages" color="warning" :content="toolbarCounts.messages" offset-x="4"
offset-y="-2">
<v-icon>mdi-message-text-outline</v-icon>
<v-icon :icon="mdiMessageTextOutline" />
</v-badge>
<v-icon v-else>mdi-message-text-outline</v-icon>
<v-icon v-else :icon="mdiMessageTextOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -59,7 +59,7 @@ v-if="toolbarCounts.messages" color="warning" :content="toolbarCounts.messages"
<v-btn
v-bind="props" :aria-label="toolbarActions.helpLabel" icon size="small" variant="text"
@click="emit('action', 'help')">
<v-icon>mdi-help</v-icon>
<v-icon :icon="mdiHelp" />
</v-btn>
</template>
</v-tooltip>
@@ -72,7 +72,7 @@ v-bind="props" :aria-label="toolbarActions.helpLabel" icon size="small" variant=
<v-btn
v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsLabel" icon size="small"
variant="text">
<v-icon>mdi-cog-outline</v-icon>
<v-icon :icon="mdiCogOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -100,7 +100,7 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<v-tooltip location="bottom" :text="logoutLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="logoutLabel" icon size="small" variant="text" @click="emit('logout')">
<v-icon>mdi-logout</v-icon>
<v-icon :icon="mdiLogout" />
</v-btn>
</template>
</v-tooltip>
@@ -108,7 +108,7 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<v-tooltip v-if="features.showThemeToggle" location="bottom" :text="themeToggleLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="themeToggleLabel" icon variant="text" @click="emit('toggle-theme')">
<v-icon>mdi-palette-outline</v-icon>
<v-icon :icon="mdiPaletteOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -118,6 +118,7 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
</template>
<script setup>
import { mdiBellOutline, mdiCogOutline, mdiHelp, mdiLogout, mdiMagnify, mdiMenu, mdiMessageTextOutline, mdiPaletteOutline } from '@mdi/js'
import { computed } from 'vue'
const props = defineProps({