From b9f433a9e5628aba4bd0af8dc7f47ebf937e8f38 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Wed, 28 Aug 2024 23:10:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(Iconify):=20=E4=BF=AE=E5=A4=8D=E5=9C=A8?=
 =?UTF-8?q?=E7=88=B6=E7=BB=84=E4=BB=B6=E4=BD=BF=E7=94=A8=20Iconify=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=97=B6=EF=BC=8Ctailwindcss=20=E7=9A=84=20c?=
 =?UTF-8?q?lass=E6=97=A0=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Iconify/index.vue | 18 +++++++++++++-----
 src/pages/demo/index.vue         |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Iconify/index.vue b/src/components/Iconify/index.vue
index b5e8706..084c017 100644
--- a/src/components/Iconify/index.vue
+++ b/src/components/Iconify/index.vue
@@ -14,21 +14,29 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'inherit',
-  color: 'inherit',
 });
 
 const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
+
+const iconStyle = computed(() => {
+  const styles: Record<string, string> = {};
+  if (props.color) {
+    styles.color = props.color;
+  }
+  if (props.size) {
+    styles.fontSize = iconSize.value;
+  }
+  return styles;
+});
 </script>
 
 <template>
-  <text class="iconify-icon" :class="[props.icon]" />
+  <text class="iconify" :class="[props.icon]" :style="iconStyle" />
 </template>
 
 <style lang="scss" scoped>
-.iconify-icon {
+.iconify {
   display: inline-block;
   line-height: 1;
-  font-size: v-bind('iconSize');
-  color: v-bind('color');
 }
 </style>
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index 7d0037f..780d07f 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -13,7 +13,7 @@ const demo = ref('Demo');
     <view class="mt-30px center flex flex-row gap-10px">
       <Iconify icon="i-mdi-account-box" size="64" color="blue" />
       <Iconify icon="i-mdi-account-box" size="48" color="orange" />
-      <Iconify icon="i-mdi-account-box" size="32" color="green" />
+      <Iconify icon="i-mdi-account-box text-green-400" size="32" />
       <Iconify icon="i-mdi-account-box" />
       <Iconify icon="i-svg-spinners-12-dots-scale-rotate" />
     </view>