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/base/SKSearchFilter.vue
+2 -1
View File
@@ -57,7 +57,7 @@
@click="expand = !expand"
>
{{ expand ? collapseBtnText : expandBtnText }}
<v-icon end :icon="expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"></v-icon>
<v-icon end :icon="expand ? mdiChevronUp : mdiChevronDown"></v-icon>
</v-btn>
</v-col>
</v-row>
@@ -66,6 +66,7 @@
</template>
<script setup lang="ts">
import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
import { computed, reactive, ref } from 'vue'
import SKDatePicker from './input_field/SKDatePicker.vue'
import SKSelectField from './input_field/SKSelectField.vue'
src/components/base/SKTableActionBar.vue
+5 -4
View File
@@ -7,7 +7,7 @@
v-if="showCreate"
class="mr-4"
color="primary"
prepend-icon="mdi-plus"
:prepend-icon="mdiPlus"
@click="$emit('create')"
>
{{ createBtnText }}
@@ -23,7 +23,7 @@
variant="text"
@click="$emit('toggle-search')"
>
<v-icon :color="searchVisible ? 'primary-variant' : undefined"> mdi-magnify </v-icon>
<v-icon :color="searchVisible ? 'primary-variant' : undefined" :icon="mdiMagnify" />
</v-btn>
</template>
</v-tooltip>
@@ -31,7 +31,7 @@
<v-tooltip :disabled="!refreshTooltipText" location="top" :text="refreshTooltipText">
<template #activator="{ props }">
<v-btn v-bind="props" density="comfortable" icon variant="text" @click="$emit('refresh')">
<v-icon>mdi-refresh</v-icon>
<v-icon :icon="mdiRefresh" />
</v-btn>
</template>
</v-tooltip>
@@ -47,7 +47,7 @@
variant="text"
@click="$emit('settings')"
>
<v-icon>mdi-cog</v-icon>
<v-icon :icon="mdiCog" />
</v-btn>
</template>
</v-tooltip>
@@ -84,6 +84,7 @@
</template>
<script setup lang="ts">
import { mdiCog, mdiMagnify, mdiPlus, mdiRefresh } from '@mdi/js'
import { computed, toRefs } from 'vue'
interface SettingsItem {
src/components/base/SKTreeTable.vue
+2 -1
View File
@@ -22,7 +22,7 @@
variant="text"
@click="toggleExpand(item.id)"
>
<v-icon>{{ isExpanded(item.id) ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
<v-icon :icon="isExpanded(item.id) ? mdiChevronDown : mdiChevronRight" />
</v-btn>
<div v-else style="width: 20px"></div>
@@ -39,6 +39,7 @@
</template>
<script setup lang="ts">
import { mdiChevronDown, mdiChevronRight } from '@mdi/js'
import { computed, ref, watch } from 'vue'
interface Props {
src/components/base/analysis/AnalysisDonutChart.vue
+1 -1
View File
@@ -16,7 +16,7 @@
:size="180"
:width="25"
>
<v-icon :color="data.color" size="40">{{ data.icon }}</v-icon>
<v-icon :color="data.color" size="40" :icon="data.icon" />
</v-progress-circular>
</div>
<div class="mt-6 text-center">
src/components/base/analysis/AnalysisStatsCard.vue
+1 -3
View File
@@ -8,9 +8,7 @@
</div>
<div class="text-h4 font-weight-bold">{{ value }}</div>
</div>
<v-icon class="opacity-80" :color="color" size="x-large">
{{ icon }}
</v-icon>
<v-icon class="opacity-80" :color="color" size="x-large" :icon="icon" />
</div>
<div class="d-flex justify-space-between align-center border-t pt-3">
src/components/base/analysis/AnalysisTrendChart.vue
+2 -1
View File
@@ -2,7 +2,7 @@
<v-card class="rounded-lg" elevation="2" v-bind="$attrs">
<v-card-title class="d-flex align-center py-4 px-4">
<div class="d-flex align-center">
<v-icon class="mr-2" color="primary" icon="mdi-chart-timeline-variant"></v-icon>
<v-icon class="mr-2" color="primary" :icon="mdiChartTimelineVariant"></v-icon>
<span>{{ title }}</span>
</div>
<v-spacer></v-spacer>
@@ -49,6 +49,7 @@
</template>
<script setup lang="ts">
import { mdiChartTimelineVariant } from '@mdi/js'
interface Props {
title: string
data: number[]
src/components/base/dashboard/DashboardApps.vue
+1 -1
View File
@@ -18,7 +18,7 @@
>
<div class="pa-4 h-100 hover-bg" @click="$emit('app-click', app)">
<div class="d-flex align-center mb-3">
<v-icon class="mr-3" :color="app.color" size="large">{{ app.icon }}</v-icon>
<v-icon class="mr-3" :color="app.color" size="large" :icon="app.icon" />
<span class="text-subtitle-1 font-weight-medium">{{ app.name }}</span>
</div>
<div
src/components/base/dashboard/DashboardChart.vue
+3 -2
View File
@@ -23,11 +23,11 @@
</div>
<div class="mt-4 d-flex justify-center gap-4 w-100">
<div class="d-flex align-center mr-4">
<v-icon class="mr-1" color="primary" size="small">mdi-circle</v-icon>
<v-icon class="mr-1" color="primary" size="small" :icon="mdiCircle" />
<span class="text-caption">{{ primaryLabel }}</span>
</div>
<div class="d-flex align-center">
<v-icon class="mr-1" color="grey-lighten-3" size="small">mdi-circle</v-icon>
<v-icon class="mr-1" color="grey-lighten-3" size="small" :icon="mdiCircle" />
<span class="text-caption">{{ secondaryLabel }}</span>
</div>
</div>
@@ -36,6 +36,7 @@
</template>
<script setup lang="ts">
import { mdiCircle } from '@mdi/js'
interface Props {
title: string
value: number
src/components/base/dashboard/DashboardQuickNav.vue
+1 -1
View File
@@ -13,7 +13,7 @@
variant="text"
@click="$emit('nav-click', nav)"
>
<v-icon size="24">{{ nav.icon }}</v-icon>
<v-icon size="24" :icon="nav.icon" />
</v-btn>
<div class="text-caption text-grey-darken-1">{{ nav.title }}</div>
</v-col>
src/components/base/login/LoginForm.vue
+2 -1
View File
@@ -5,7 +5,7 @@ v-model="username" bg-color="surface" class="mb-6 mb-md-4" color="primary"
density="comfortable" hide-details :placeholder="props.accPlaceholder" variant="outlined"></v-text-field>
<v-text-field
v-model="password" :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'" bg-color="surface"
v-model="password" :append-inner-icon="showPassword ? mdiEyeOff : mdiEye" bg-color="surface"
class="mb-6 mb-md-4" color="primary" density="comfortable" hide-details :placeholder="props.passwPlaceholder" :type="showPassword ? 'text' : 'password'"
variant="outlined"
@click:append-inner="showPassword = !showPassword"></v-text-field>
@@ -30,6 +30,7 @@ class="text-body-2 text-primary text-decoration-none" :href="props.forgotPasswor
</template>
<script setup lang="ts">
import { mdiEye, mdiEyeOff } from '@mdi/js'
import { onMounted, ref, watch } from 'vue'
const username = ref('')
const password = ref('')
src/components/base/login/LoginToolBar.vue
+5 -4
View File
@@ -1,13 +1,13 @@
<template>
<div class="d-flex justify-end py-0 py-sm-2">
<v-btn
class="d-none d-md-block" color="grey-darken-1" icon="mdi-palette-outline" size="small" variant="text"
class="d-none d-md-block" color="grey-darken-1" :icon="mdiPaletteOutline" size="small" variant="text"
@click="toggleTheme"></v-btn>
<!-- <v-btn icon="mdi-dock-window" variant="text" size="small" color="grey-darken-1" @click="handleToggleLayout"></v-btn> -->
<!-- <v-btn :icon="mdiDockWindow" variant="text" size="small" color="grey-darken-1" @click="handleToggleLayout"></v-btn> -->
<v-menu location="bottom end">
<template #activator="{ props: menuActivatorProps }">
<v-btn
v-bind="menuActivatorProps" color="grey-darken-1" icon="mdi-translate" size="small"
v-bind="menuActivatorProps" color="grey-darken-1" :icon="mdiTranslate" size="small"
variant="text"></v-btn>
</template>
<v-list density="compact">
@@ -18,11 +18,12 @@ v-for="locale in localeOptions" :key="locale" :active="locale === props.locale"
</v-list-item>
</v-list>
</v-menu>
<!-- <v-btn icon="mdi-weather-night" variant="text" size="small" color="grey-darken-1"></v-btn> -->
<!-- <v-btn :icon="mdiWeatherNight" variant="text" size="small" color="grey-darken-1"></v-btn> -->
</div>
</template>
<script setup lang="ts">
import { mdiDockWindow, mdiPaletteOutline, mdiTranslate, mdiWeatherNight } from '@mdi/js'
import { computed } from 'vue'
import { useTheme } from 'vuetify'
import { getNextThemeName } from '@/utils/theme'
src/components/base/login/LoginVerify.vue
+4 -3
View File
@@ -10,16 +10,16 @@
class="captcha-wrapper d-flex align-center cursor-pointer me-1 me-md-2" :title="props.refreshTitle"
@click="handleRefresh">
<img v-if="captchaImage" alt="Captcha" class="captcha-img" :src="captchaImage" />
<v-icon class="ms-2" color="grey" icon="mdi-refresh"></v-icon>
<v-icon class="ms-2" color="grey" :icon="mdiRefresh"></v-icon>
</div>
<!-- Input and Verify -->
<v-text-field
v-model="inputCode" :append-inner-icon="props.verified ? 'mdi-check-circle' : ''" bg-color="surface" class="flex-grow-1"
v-model="inputCode" :append-inner-icon="props.verified ? mdiCheckCircle : undefined" bg-color="surface" class="flex-grow-1"
color="primary" density="compact" :disabled="props.verified" :error="!!errorMsg" hide-details
:placeholder="props.captchaPlaceholder" variant="outlined">
<template v-if="props.verified" #append-inner>
<v-icon color="success">mdi-check-circle</v-icon>
<v-icon color="success" :icon="mdiCheckCircle" />
</template>
</v-text-field>
</div>
@@ -31,6 +31,7 @@ v-model="inputCode" :append-inner-icon="props.verified ? 'mdi-check-circle' : ''
</template>
<script setup lang="ts">
import { mdiCheckCircle, mdiRefresh } from '@mdi/js'
import { computed } from 'vue'
interface CaptchaPayload {