From ae4496d591ce59977bab35706ebe73d9cf1dadf3 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Fri, 30 Jun 2023 01:14:36 +0800
Subject: [PATCH] fix: hydration completed but contains mismatches

---
 .husky/commit-msg                             |  2 +-
 .husky/pre-commit                             |  2 +-
 .../src/client/components/Iconify.vue         | 23 +++++++++++--------
 .../src/client/composables/iconify.ts         | 12 ++++++----
 packages/plugin-iconify/src/shim.d.ts         |  2 ++
 5 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/.husky/commit-msg b/.husky/commit-msg
index d71a03b9..5426a932 100755
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn commitlint --edit $1
+npx commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
index d2ae35e8..36af2198 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+npx lint-staged
diff --git a/packages/plugin-iconify/src/client/components/Iconify.vue b/packages/plugin-iconify/src/client/components/Iconify.vue
index 05e60157..05c1ca39 100644
--- a/packages/plugin-iconify/src/client/components/Iconify.vue
+++ b/packages/plugin-iconify/src/client/components/Iconify.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon as OfflineIcon } from '@iconify/vue/offline'
+import { ClientOnly } from '@vuepress/client'
 import type { CSSProperties } from 'vue'
 import { computed, toRefs } from 'vue'
 import { useIconify } from '../composables/iconify.js'
@@ -42,16 +43,18 @@ declare const __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__: string
 </script>
 
 <template>
-  <span v-if="!loaded" class="vp-iconify" :style="iconStyle"></span>
-  <OfflineIcon
-    v-else-if="icon"
-    :icon="icon"
-    class="vp-iconify"
-    :style="iconStyle"
-  />
-  <span v-else class="vp-iconify" :style="{ ...iconStyle, fontSize: size }">
-    {{ props.name }}
-  </span>
+  <ClientOnly>
+    <span v-if="!loaded" class="vp-iconify" :style="iconStyle"></span>
+    <OfflineIcon
+      v-else-if="icon"
+      :icon="icon"
+      class="vp-iconify"
+      :style="iconStyle"
+    />
+    <span v-else class="vp-iconify" :style="{ ...iconStyle, fontSize: size }">
+      {{ props.name }}
+    </span>
+  </ClientOnly>
 </template>
 <style scoped>
 .vp-iconify {
diff --git a/packages/plugin-iconify/src/client/composables/iconify.ts b/packages/plugin-iconify/src/client/composables/iconify.ts
index 38ef6bff..b806b4d4 100644
--- a/packages/plugin-iconify/src/client/composables/iconify.ts
+++ b/packages/plugin-iconify/src/client/composables/iconify.ts
@@ -13,10 +13,14 @@ export const useIconify = (name: ComputedRef<string> | Ref<string>) => {
     if (icon.value) {
       return
     }
-    try {
-      loaded.value = false
-      iconCache.value[name.value] = await loadIcon(name.value)
-    } finally {
+    if (!__VUEPRESS_SSR__) {
+      try {
+        loaded.value = false
+        iconCache.value[name.value] = await loadIcon(name.value)
+      } finally {
+        loaded.value = true
+      }
+    } else {
       loaded.value = true
     }
   }
diff --git a/packages/plugin-iconify/src/shim.d.ts b/packages/plugin-iconify/src/shim.d.ts
index b681832a..f1c86e6f 100644
--- a/packages/plugin-iconify/src/shim.d.ts
+++ b/packages/plugin-iconify/src/shim.d.ts
@@ -2,3 +2,5 @@ declare module '*.vue' {
   const comp: any
   export default comp
 }
+
+declare const __VUEPRESS_SSR__: boolean