perf: 调整 iconify 逻辑

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"
     />
-    <span v-else class="vp-iconify" :style="{ ...iconStyle, fontSize: size }">
-      {{ props.name }}
-    </span>
   </ClientOnly>
 </template>
 

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<Record<string, IconifyIcon>> = ref({})
-
-export function useIconify(name: ComputedRef<string> | Ref<string>) {
-  const icon = computed(() => iconCache.value[name.value])
-  const loaded = ref(true)
+export function useIconify(name: Ref<string>) {
+  const icon = ref<IconifyIcon | null>(null)
+  const loaded = ref(false)
 
   async function loadIconComponent() {
     if (icon.value)
@@ -16,7 +14,8 @@ export function useIconify(name: ComputedRef<string> | Ref<string>) {
     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

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', () => {