diff --git a/plugins/plugin-iconify/src/client/components/Iconify.vue b/plugins/plugin-iconify/src/client/components/Iconify.vue index 34df1bfb..3a347240 100644 --- a/plugins/plugin-iconify/src/client/components/Iconify.vue +++ b/plugins/plugin-iconify/src/client/components/Iconify.vue @@ -53,9 +53,6 @@ declare const __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__: string class="vp-iconify" :style="iconStyle" /> - - {{ props.name }} - diff --git a/plugins/plugin-iconify/src/client/composables/iconify.ts b/plugins/plugin-iconify/src/client/composables/iconify.ts index 1d324894..352a750f 100644 --- a/plugins/plugin-iconify/src/client/composables/iconify.ts +++ b/plugins/plugin-iconify/src/client/composables/iconify.ts @@ -1,13 +1,11 @@ import type { IconifyIcon } from '@iconify/vue' import { loadIcon } from '@iconify/vue' -import { computed, ref, watch } from 'vue' -import type { ComputedRef, Ref } from 'vue' +import { ref, watch } from 'vue' +import type { Ref } from 'vue' -const iconCache: Ref> = ref({}) - -export function useIconify(name: ComputedRef | Ref) { - const icon = computed(() => iconCache.value[name.value]) - const loaded = ref(true) +export function useIconify(name: Ref) { + const icon = ref(null) + const loaded = ref(false) async function loadIconComponent() { if (icon.value) @@ -16,7 +14,8 @@ export function useIconify(name: ComputedRef | Ref) { if (!__VUEPRESS_SSR__) { try { loaded.value = false - iconCache.value[name.value] = await loadIcon(name.value) + const cached = await loadIcon(name.value) + icon.value = cached } finally { loaded.value = true diff --git a/theme/src/client/config.ts b/theme/src/client/config.ts index ae380bbc..c4549fa2 100644 --- a/theme/src/client/config.ts +++ b/theme/src/client/config.ts @@ -12,6 +12,9 @@ export default defineClientConfig({ enhance({ app, router }) { // global component app.component('Badge', Badge) + + if (app._context.components.ExternalLinkIcon) + delete app._context.components.ExternalLinkIcon app.component('ExternalLinkIcon', ExternalLinkIcon) app.component('DocSearch', () => {