yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

perf(theme): optimize <VPIcon />

Browse Source
This commit is contained in:
pengzhanbo 2024-07-23 00:17:12 +08:00
parent 78449a88fe
commit fa06931985
6 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
theme/src/client/components/VPIcon.vue
View File

@ -69,13 +69,13 @@ const style = computed(() => ({
<img v-if="type === 'link'" class="vp__img" :src="link" alt="" :style="{ height: size }">
<span
v-else-if="type === 'svg'"
class="vp-iconify"
class="vp-icon"
:style="style"
v-html="svg"
/>
<span
v-else-if="type === 'local' && className"
class="vp-iconify" :class="[className]"
class="vp-icon" :class="[className]"
:style="style"
/>
<VPIconify v-else :name="(name as string)" :size="size" :color="color" />

9
theme/src/client/components/VPIconify.vue
View File

@ -58,7 +58,7 @@ const bind = computed<any>(() => ({
<template>
<ClientOnly>
<span v-if="!loaded" class="vp-iconify" :style="{ color, width: size, height: size }" />
<span v-if="!loaded" class="vp-icon" :style="{ color, width: size, height: size }" />
<OfflineIcon
v-else-if="icon"
class="vp-iconify"
@ -66,10 +66,3 @@ const bind = computed<any>(() => ({
/>
</ClientOnly>
</template>
<style>
.vp-iconify {
display: inline-block;
vertical-align: middle;
}
</style>

26
theme/src/client/components/VPSidebarItem.vue
View File

@ -220,7 +220,7 @@ function onCaretClick() {
transition: color var(--t-color);
}
.item :deep(.vp-iconify) {
.item :deep(.vp-icon) {
margin: 0 0.25rem 0 0;
font-size: 0.9em;
color: var(--vp-c-text-2);
@ -240,21 +240,21 @@ function onCaretClick() {
color: var(--vp-c-text-1);
}
.vp-sidebar-item.level-0.is-active > .item > :deep(.vp-iconify),
.vp-sidebar-item.level-1.is-active > .item > :deep(.vp-iconify),
.vp-sidebar-item.level-2.is-active > .item > :deep(.vp-iconify),
.vp-sidebar-item.level-3.is-active > .item > :deep(.vp-iconify),
.vp-sidebar-item.level-4.is-active > .item > :deep(.vp-iconify),
.vp-sidebar-item.level-5.is-active > .item > :deep(.vp-iconify) {
.vp-sidebar-item.level-0.is-active > .item > :deep(.vp-icon),
.vp-sidebar-item.level-1.is-active > .item > :deep(.vp-icon),
.vp-sidebar-item.level-2.is-active > .item > :deep(.vp-icon),
.vp-sidebar-item.level-3.is-active > .item > :deep(.vp-icon),
.vp-sidebar-item.level-4.is-active > .item > :deep(.vp-icon),
.vp-sidebar-item.level-5.is-active > .item > :deep(.vp-icon) {
color: var(--vp-c-brand-1);
}
.vp-sidebar-item.level-0.is-link > .item:hover :deep(.vp-iconify),
.vp-sidebar-item.level-1.is-link > .item:hover :deep(.vp-iconify),
.vp-sidebar-item.level-2.is-link > .item:hover :deep(.vp-iconify),
.vp-sidebar-item.level-3.is-link > .item:hover :deep(.vp-iconify),
.vp-sidebar-item.level-4.is-link > .item:hover :deep(.vp-iconify),
.vp-sidebar-item.level-5.is-link > .item:hover :deep(.vp-iconify) {
.vp-sidebar-item.level-0.is-link > .item:hover :deep(.vp-icon),
.vp-sidebar-item.level-1.is-link > .item:hover :deep(.vp-icon),
.vp-sidebar-item.level-2.is-link > .item:hover :deep(.vp-icon),
.vp-sidebar-item.level-3.is-link > .item:hover :deep(.vp-icon),
.vp-sidebar-item.level-4.is-link > .item:hover :deep(.vp-icon),
.vp-sidebar-item.level-5.is-link > .item:hover :deep(.vp-icon) {
color: var(--vp-c-brand-1);
}

2
theme/src/client/components/global/VPCard.vue
View File

@ -49,7 +49,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
box-shadow: var(--vp-shadow-2);
}
.vp-card-wrapper :deep(.vp-iconify),
.vp-card-wrapper :deep(.vp-icon),
.vp-card-wrapper :deep(.vp__img) {
margin: 0;
}

2
theme/src/client/components/global/VPLinkCard.vue
View File

@ -75,7 +75,7 @@ defineProps<{
content: "";
}
.vp-link-card .link :deep(.vp-iconify),
.vp-link-card .link :deep(.vp-icon),
.vp-link-card .link :deep(.vp__img) {
margin: 0;
}

4
theme/src/client/styles/utils.css
View File

@ -8,8 +8,8 @@
white-space: nowrap;
}
.vp-iconify {
margin: 0.3em;
.vp-icon {
margin: 0 0.3em;
}
.smooth {