From 90e6b81fb779ae4eb9dc96fb74bf3c410a6a44fc Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 31 Dec 2023 00:10:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(plugin-iconify):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E7=9A=84=20icon=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/client/components/Iconify.vue         | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/plugins/plugin-iconify/src/client/components/Iconify.vue b/plugins/plugin-iconify/src/client/components/Iconify.vue
index 3a347240..c57c97c7 100644
--- a/plugins/plugin-iconify/src/client/components/Iconify.vue
+++ b/plugins/plugin-iconify/src/client/components/Iconify.vue
@@ -1,15 +1,23 @@
 <script lang="ts" setup>
 import { Icon as OfflineIcon } from '@iconify/vue/offline'
 import { ClientOnly } from '@vuepress/client'
-import type { CSSProperties } from 'vue'
+import type { IconifyRenderMode } from '@iconify/vue'
+import type { StyleValue } from 'vue'
 import { computed, toRefs } from 'vue'
 import { useIconify } from '../composables/iconify.js'
 
 const props = withDefaults(
   defineProps<{
     name?: string
-    size?: string
+    size?: string | number
     color?: string
+    mode?: IconifyRenderMode
+    style?: StyleValue
+    flip?: string
+    vFlip?: boolean
+    hFlip?: boolean
+    inline?: boolean
+    rotate?: number
   }>(),
   {
     name: '',
@@ -29,14 +37,21 @@ const size = computed(() => {
 
   return size
 })
-const iconStyle = computed(() => {
-  const style: CSSProperties = {
-    color: props.color || __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__,
-    width: size.value,
-    height: size.value,
-  }
-  return style
-})
+const color = computed(() => props.color || __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__)
+
+const bind = computed<any>(() => ({
+  icon: icon.value,
+  mode: props.mode,
+  inline: props.inline,
+  rotate: props.rotate,
+  flip: props.flip,
+  vFlip: props.vFlip,
+  hFlip: props.hFlip,
+  color: props.color,
+  width: size.value,
+  height: size.value,
+  style: props.style,
+}))
 </script>
 
 <script lang="ts">
@@ -46,12 +61,11 @@ declare const __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__: string
 
 <template>
   <ClientOnly>
-    <span v-if="!loaded" class="vp-iconify" :style="iconStyle" />
+    <span v-if="!loaded" class="vp-iconify" :style="{ color, width: size, height: size }" />
     <OfflineIcon
       v-else-if="icon"
-      :icon="icon"
       class="vp-iconify"
-      :style="iconStyle"
+      v-bind="bind"
     />
   </ClientOnly>
 </template>