From f78407a4097efbbddca3d07bec3d2def3726324e Mon Sep 17 00:00:00 2001
From: Aex <adaex@qq.com>
Date: Fri, 5 Nov 2021 17:44:02 +0800
Subject: [PATCH] fix(components): empty icon component judgment (#4178)

* fix(components): empty icon component judgment

* revert: globals components

* fix(components): el-icon missing import

* fix: use shallowRef for icon components

* refactor: remove shallowRef

* fix: remove unused code

* fix: social-link icon size

* fix: time picker icon

* fix: v-if judge
---
 .../components/navbar/vp-social-link.vue      |  2 +-
 docs/examples/button/basic.vue                | 14 +----------
 docs/examples/button/group.vue                | 17 +------------
 docs/examples/button/icon.vue                 | 17 +------------
 docs/examples/button/size.vue                 |  9 +------
 docs/examples/descriptions/sizes.vue          | 18 +++----------
 docs/examples/input/mixed-input.vue           | 19 +++++---------
 docs/examples/input/with-icon.vue             | 25 +++++--------------
 docs/examples/popconfirm/customize.vue        |  9 +------
 docs/examples/popconfirm/trigger-event.vue    | 21 +++++-----------
 docs/examples/switch/custom-icons.vue         | 21 ++++++----------
 docs/examples/timeline/custom-node.vue        |  7 +++---
 packages/components/alert/src/alert.vue       |  6 ++++-
 .../breadcrumb/src/breadcrumb-item.vue        |  5 ++++
 .../src/date-picker-com/panel-date-range.vue  |  2 ++
 .../src/date-picker-com/panel-month-range.vue |  3 ++-
 .../components/dropdown/src/dropdown-item.vue |  2 ++
 packages/components/input/src/input.vue       |  2 +-
 .../page-header/src/page-header.vue           |  2 +-
 .../components/popconfirm/src/popconfirm.vue  |  2 +-
 packages/components/result/src/index.vue      |  6 ++++-
 packages/components/select-v2/src/select.vue  |  5 ++--
 packages/components/select/src/select.vue     |  3 ++-
 .../time-picker/src/common/picker.vue         | 15 ++++++++---
 .../time-select/src/time-select.vue           |  2 +-
 .../transfer/src/transfer-panel.vue           |  4 ++-
 packages/components/tree-v2/src/tree-node.vue |  1 +
 packages/components/tree/src/tree-node.vue    |  1 +
 28 files changed, 85 insertions(+), 155 deletions(-)

diff --git a/docs/.vitepress/vitepress/components/navbar/vp-social-link.vue b/docs/.vitepress/vitepress/components/navbar/vp-social-link.vue
index c1461c36c0..14c1ec66c7 100644
--- a/docs/.vitepress/vitepress/components/navbar/vp-social-link.vue
+++ b/docs/.vitepress/vitepress/components/navbar/vp-social-link.vue
@@ -16,7 +16,7 @@ defineProps<{
     rel="noreferrer noopener"
     class="social-link"
   >
-    <ElIcon :size="20">
+    <ElIcon v-if="icon" :size="20">
       <component :is="icon" />
     </ElIcon>
   </a>
diff --git a/docs/examples/button/basic.vue b/docs/examples/button/basic.vue
index e9483a8894..a292b1009b 100644
--- a/docs/examples/button/basic.vue
+++ b/docs/examples/button/basic.vue
@@ -36,18 +36,6 @@
     <el-button type="danger" :icon="Delete" circle></el-button>
   </el-row>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { Search, Edit, Check, Message, Star, Delete } from '@element-plus/icons'
-export default {
-  data() {
-    return {
-      Search,
-      Edit,
-      Check,
-      Message,
-      Star,
-      Delete,
-    }
-  },
-}
 </script>
diff --git a/docs/examples/button/group.vue b/docs/examples/button/group.vue
index b4ee7dd253..0ee07587be 100644
--- a/docs/examples/button/group.vue
+++ b/docs/examples/button/group.vue
@@ -12,21 +12,6 @@
     <el-button type="primary" :icon="Delete"></el-button>
   </el-button-group>
 </template>
-<script lang="ts">
-import { ElIcon } from '@element-plus/components/icon'
+<script setup lang="ts">
 import { ArrowLeft, Edit, Share, Delete, ArrowRight } from '@element-plus/icons'
-export default {
-  components: {
-    ElIcon,
-    ArrowRight,
-  },
-  data() {
-    return {
-      ArrowLeft,
-      Edit,
-      Share,
-      Delete,
-    }
-  },
-}
 </script>
diff --git a/docs/examples/button/icon.vue b/docs/examples/button/icon.vue
index c65a039844..0a474fa78e 100644
--- a/docs/examples/button/icon.vue
+++ b/docs/examples/button/icon.vue
@@ -7,21 +7,6 @@
     Upload<el-icon class="el-icon--right"><Upload /></el-icon>
   </el-button>
 </template>
-<script lang="ts">
-import { ElIcon } from '@element-plus/components/icon'
+<script setup lang="ts">
 import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons'
-export default {
-  components: {
-    ElIcon,
-    Upload,
-  },
-  data() {
-    return {
-      Edit,
-      Share,
-      Delete,
-      Search,
-    }
-  },
-}
 </script>
diff --git a/docs/examples/button/size.vue b/docs/examples/button/size.vue
index 6a1780d5e5..08cac41fec 100644
--- a/docs/examples/button/size.vue
+++ b/docs/examples/button/size.vue
@@ -18,13 +18,6 @@
     <el-button :icon="Search" size="mini" circle></el-button>
   </el-row>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { Search } from '@element-plus/icons'
-export default {
-  data() {
-    return {
-      Search,
-    }
-  },
-}
 </script>
diff --git a/docs/examples/descriptions/sizes.vue b/docs/examples/descriptions/sizes.vue
index 6a1049e42e..1dd90ddf0d 100644
--- a/docs/examples/descriptions/sizes.vue
+++ b/docs/examples/descriptions/sizes.vue
@@ -75,7 +75,8 @@
   </el-descriptions>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue'
 import {
   User,
   Iphone,
@@ -84,18 +85,5 @@ import {
   OfficeBuilding,
 } from '@element-plus/icons'
 
-export default {
-  components: {
-    User,
-    Iphone,
-    Location,
-    Tickets,
-    OfficeBuilding,
-  },
-  data() {
-    return {
-      size: '',
-    }
-  },
-}
+const size = ref('')
 </script>
diff --git a/docs/examples/input/mixed-input.vue b/docs/examples/input/mixed-input.vue
index 8f4bea853b..1f1e5c20ed 100644
--- a/docs/examples/input/mixed-input.vue
+++ b/docs/examples/input/mixed-input.vue
@@ -29,20 +29,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { Search } from '@element-plus/icons'
-export default defineComponent({
-  setup() {
-    return {
-      Search,
-      input1: ref(''),
-      input2: ref(''),
-      input3: ref(''),
-      select: ref(''),
-    }
-  },
-})
+const input1 = ref('')
+const input2 = ref('')
+const input3 = ref('')
+const select = ref('')
 </script>
 
 <style>
diff --git a/docs/examples/input/with-icon.vue b/docs/examples/input/with-icon.vue
index f5d3d34cf7..ce5fdf9130 100644
--- a/docs/examples/input/with-icon.vue
+++ b/docs/examples/input/with-icon.vue
@@ -36,26 +36,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { Calendar, Search } from '@element-plus/icons'
-
-export default defineComponent({
-  components: {
-    Calendar,
-    Search,
-  },
-  setup() {
-    return {
-      Calendar,
-      Search,
-      input1: ref(''),
-      input2: ref(''),
-      input3: ref(''),
-      input4: ref(''),
-    }
-  },
-})
+const input1 = ref('')
+const input2 = ref('')
+const input3 = ref('')
+const input4 = ref('')
 </script>
 
 <style>
diff --git a/docs/examples/popconfirm/customize.vue b/docs/examples/popconfirm/customize.vue
index fecd76af41..5a38f76a73 100644
--- a/docs/examples/popconfirm/customize.vue
+++ b/docs/examples/popconfirm/customize.vue
@@ -12,13 +12,6 @@
   </el-popconfirm>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { InfoFilled } from '@element-plus/icons'
-
-export default defineComponent({
-  setup() {
-    return { InfoFilled }
-  },
-})
 </script>
diff --git a/docs/examples/popconfirm/trigger-event.vue b/docs/examples/popconfirm/trigger-event.vue
index 309af6c486..646a53a02a 100644
--- a/docs/examples/popconfirm/trigger-event.vue
+++ b/docs/examples/popconfirm/trigger-event.vue
@@ -14,22 +14,13 @@
   </el-popconfirm>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { InfoFilled } from '@element-plus/icons'
 
-export default {
-  data() {
-    return {
-      InfoFilled,
-    }
-  },
-  methods: {
-    confirmEvent() {
-      console.log('confirm!')
-    },
-    cancelEvent() {
-      console.log('cancel!')
-    },
-  },
+const confirmEvent = () => {
+  console.log('confirm!')
+}
+const cancelEvent = () => {
+  console.log('cancel!')
 }
 </script>
diff --git a/docs/examples/switch/custom-icons.vue b/docs/examples/switch/custom-icons.vue
index 7084c475cf..2961b882d3 100644
--- a/docs/examples/switch/custom-icons.vue
+++ b/docs/examples/switch/custom-icons.vue
@@ -1,27 +1,20 @@
 <template>
-  <el-switch v-model="value1" :active-icon="active" :inactive-icon="inactive">
+  <el-switch v-model="value1" :active-icon="Check" :inactive-icon="Close">
   </el-switch>
   <br />
   <el-switch
     v-model="value2"
     style="margin-left: 24px"
     inline-prompt
-    :active-icon="active"
-    :inactive-icon="inactive"
+    :active-icon="Check"
+    :inactive-icon="Close"
   >
   </el-switch>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue'
 import { Check, Close } from '@element-plus/icons'
-export default {
-  data() {
-    return {
-      value1: true,
-      value2: true,
-      active: Check,
-      inactive: Close,
-    }
-  },
-}
+const value1 = ref(true)
+const value2 = ref(true)
 </script>
diff --git a/docs/examples/timeline/custom-node.vue b/docs/examples/timeline/custom-node.vue
index ca88a8e2d0..1fe000ef59 100644
--- a/docs/examples/timeline/custom-node.vue
+++ b/docs/examples/timeline/custom-node.vue
@@ -18,10 +18,11 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
 import { MoreFilled } from '@element-plus/icons'
 
-export default {
-  data() {
+export default defineComponent({
+  setup() {
     return {
       activities: [
         {
@@ -54,5 +55,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index b7e9fcd083..fbb103f287 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -6,7 +6,11 @@
       :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
       role="alert"
     >
-      <el-icon v-if="showIcon" class="el-alert__icon" :class="isBigIcon">
+      <el-icon
+        v-if="showIcon && iconComponent"
+        class="el-alert__icon"
+        :class="isBigIcon"
+      >
         <component :is="iconComponent" />
       </el-icon>
       <div class="el-alert__content">
diff --git a/packages/components/breadcrumb/src/breadcrumb-item.vue b/packages/components/breadcrumb/src/breadcrumb-item.vue
index 6f5b6521db..b65bc40d66 100644
--- a/packages/components/breadcrumb/src/breadcrumb-item.vue
+++ b/packages/components/breadcrumb/src/breadcrumb-item.vue
@@ -24,6 +24,7 @@ import {
   onMounted,
   getCurrentInstance,
 } from 'vue'
+import ElIcon from '@element-plus/components/icon'
 import { elBreadcrumbKey } from '@element-plus/tokens'
 import { breadcrumbItemProps } from './breadcrumb-item'
 
@@ -34,6 +35,10 @@ const COMPONENT_NAME = 'ElBreadcrumbItem'
 export default defineComponent({
   name: COMPONENT_NAME,
 
+  components: {
+    ElIcon,
+  },
+
   props: breadcrumbItemProps,
 
   setup(props) {
diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
index 64edf2ca53..9b4cf8e4c0 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
@@ -248,6 +248,7 @@ import {
   extractTimeFormat,
   TimePickPanel,
 } from '@element-plus/components/time-picker'
+import ElIcon from '@element-plus/components/icon'
 import { isValidDatePickType } from '@element-plus/utils/validators'
 import {
   DArrowLeft,
@@ -269,6 +270,7 @@ export default defineComponent({
     DateTable,
     ElInput,
     ElButton,
+    ElIcon,
     DArrowLeft,
     ArrowLeft,
     DArrowRight,
diff --git a/packages/components/date-picker/src/date-picker-com/panel-month-range.vue b/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
index 15050db450..51575bc2c2 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
@@ -103,6 +103,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref, watch, inject } from 'vue'
 import dayjs from 'dayjs'
+import ElIcon from '@element-plus/components/icon'
 import { useLocaleInject } from '@element-plus/hooks'
 import { DArrowLeft, DArrowRight } from '@element-plus/icons'
 import MonthTable from './basic-month-table.vue'
@@ -111,7 +112,7 @@ import type { PropType } from 'vue'
 import type { Dayjs } from 'dayjs'
 
 export default defineComponent({
-  components: { MonthTable, DArrowLeft, DArrowRight },
+  components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },
 
   props: {
     unlinkPanels: Boolean,
diff --git a/packages/components/dropdown/src/dropdown-item.vue b/packages/components/dropdown/src/dropdown-item.vue
index efe49654df..dea8a677ff 100644
--- a/packages/components/dropdown/src/dropdown-item.vue
+++ b/packages/components/dropdown/src/dropdown-item.vue
@@ -15,12 +15,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue'
+import ElIcon from '@element-plus/components/icon'
 import { buildProps, definePropType } from '@element-plus/utils/props'
 import { useDropdown } from './useDropdown'
 import type { Component } from 'vue'
 
 export default defineComponent({
   name: 'ElDropdownItem',
+  components: { ElIcon },
   props: buildProps({
     command: {
       type: [Object, String, Number],
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index 15edb782d2..1e564f7945 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -90,7 +90,7 @@
           </span>
         </span>
         <el-icon
-          v-if="validateState"
+          v-if="validateState && validateIcon"
           class="el-input__icon el-input__validateIcon"
         >
           <component :is="validateIcon" />
diff --git a/packages/components/page-header/src/page-header.vue b/packages/components/page-header/src/page-header.vue
index 939f7b0fa9..0549062a8c 100644
--- a/packages/components/page-header/src/page-header.vue
+++ b/packages/components/page-header/src/page-header.vue
@@ -3,7 +3,7 @@
     <div class="el-page-header__left" @click="handleClick">
       <div v-if="icon || $slots.icon" class="el-page-header__icon">
         <slot name="icon">
-          <el-icon><component :is="icon" /></el-icon>
+          <el-icon v-if="icon"><component :is="icon" /></el-icon>
         </slot>
       </div>
       <div class="el-page-header__title">
diff --git a/packages/components/popconfirm/src/popconfirm.vue b/packages/components/popconfirm/src/popconfirm.vue
index 2b9d68e315..54fb0dbb2c 100644
--- a/packages/components/popconfirm/src/popconfirm.vue
+++ b/packages/components/popconfirm/src/popconfirm.vue
@@ -10,7 +10,7 @@
     <div class="el-popconfirm">
       <div class="el-popconfirm__main">
         <el-icon
-          v-if="!hideIcon"
+          v-if="!hideIcon && icon"
           class="el-popconfirm__icon"
           :style="{ color: iconColor }"
         >
diff --git a/packages/components/result/src/index.vue b/packages/components/result/src/index.vue
index 8eaf7442ce..dc35a0fdfa 100644
--- a/packages/components/result/src/index.vue
+++ b/packages/components/result/src/index.vue
@@ -2,7 +2,11 @@
   <div class="el-result">
     <div class="el-result__icon">
       <slot name="icon">
-        <component :is="resultIcon.component" :class="resultIcon.class" />
+        <component
+          :is="resultIcon.component"
+          v-if="resultIcon.component"
+          :class="resultIcon.class"
+        />
       </slot>
     </div>
     <div v-if="title || $slots.title" class="el-result__title">
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index d0824a9cfe..e07daaf73b 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -205,13 +205,14 @@
           </span>
           <span class="el-select-v2__suffix">
             <el-icon
+              v-if="iconComponent"
               v-show="!showClearBtn"
               :class="['el-select-v2__caret', 'el-input__icon', iconReverse]"
             >
-              <component :is="iconComponent" v-if="iconComponent" />
+              <component :is="iconComponent" />
             </el-icon>
             <el-icon
-              v-if="showClearBtn"
+              v-if="showClearBtn && clearIcon"
               class="el-select-v2__caret el-input__icon"
               @click.prevent.stop="handleClear"
             >
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 676ec34b18..ac6292c835 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -161,13 +161,14 @@
             </template>
             <template #suffix>
               <el-icon
+                v-if="iconComponent"
                 v-show="!showClose"
                 :class="['el-select__caret', 'el-input__icon', iconReverse]"
               >
                 <component :is="iconComponent" />
               </el-icon>
               <el-icon
-                v-if="showClose"
+                v-if="showClose && clearIcon"
                 class="el-select__caret el-input__icon"
                 @click="handleClearClick"
               >
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 417b25d2cf..9b66b7f3e2 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -37,13 +37,17 @@
         @mouseleave="onMouseLeave"
       >
         <template #prefix>
-          <el-icon class="el-input__icon" @click="handleFocus">
+          <el-icon
+            v-if="triggerIcon"
+            class="el-input__icon"
+            @click="handleFocus"
+          >
             <component :is="triggerIcon"></component>
           </el-icon>
         </template>
         <template #suffix>
           <el-icon
-            v-if="showClose"
+            v-if="showClose && clearIcon"
             class="el-input__icon clear-icon"
             @click="onClearIconClick"
           >
@@ -66,7 +70,11 @@
         @mouseleave="onMouseLeave"
         @keydown="handleKeydown"
       >
-        <el-icon class="el-input__icon el-range__icon" @click="handleFocus">
+        <el-icon
+          v-if="triggerIcon"
+          class="el-input__icon el-range__icon"
+          @click="handleFocus"
+        >
           <component :is="triggerIcon"></component>
         </el-icon>
         <input
@@ -97,6 +105,7 @@
           @change="handleEndChange"
         />
         <el-icon
+          v-if="clearIcon"
           class="el-input__icon el-range__close-icon"
           :class="{
             'el-range__close-icon--hidden': !showClose,
diff --git a/packages/components/time-select/src/time-select.vue b/packages/components/time-select/src/time-select.vue
index b00d72c800..027b4f544d 100644
--- a/packages/components/time-select/src/time-select.vue
+++ b/packages/components/time-select/src/time-select.vue
@@ -22,7 +22,7 @@
       :disabled="item.disabled"
     />
     <template #prefix>
-      <el-icon class="el-input__prefix-icon">
+      <el-icon v-if="prefixIcon" class="el-input__prefix-icon">
         <component :is="prefixIcon" />
       </el-icon>
     </template>
diff --git a/packages/components/transfer/src/transfer-panel.vue b/packages/components/transfer/src/transfer-panel.vue
index 6e7b349b46..8b5c8142ac 100644
--- a/packages/components/transfer/src/transfer-panel.vue
+++ b/packages/components/transfer/src/transfer-panel.vue
@@ -24,7 +24,7 @@
         @mouseleave="inputHover = false"
       >
         <template #prefix>
-          <el-icon class="el-input__icon" @click="clearQuery">
+          <el-icon v-if="inputIcon" class="el-input__icon" @click="clearQuery">
             <component :is="inputIcon" />
           </el-icon>
         </template>
@@ -62,6 +62,7 @@
 import { computed, defineComponent, reactive, toRefs } from 'vue'
 import { useLocaleInject } from '@element-plus/hooks'
 import { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'
+import ElIcon from '@element-plus/components/icon'
 import ElInput from '@element-plus/components/input'
 import { CircleClose, Search } from '@element-plus/icons'
 import { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'
@@ -73,6 +74,7 @@ export default defineComponent({
     ElCheckboxGroup,
     ElCheckbox,
     ElInput,
+    ElIcon,
     OptionContent: ({ option }) => option,
   },
 
diff --git a/packages/components/tree-v2/src/tree-node.vue b/packages/components/tree-v2/src/tree-node.vue
index c908cbc07d..41d6c35f06 100644
--- a/packages/components/tree-v2/src/tree-node.vue
+++ b/packages/components/tree-v2/src/tree-node.vue
@@ -22,6 +22,7 @@
       :style="{ paddingLeft: `${(node.level - 1) * indent}px` }"
     >
       <el-icon
+        v-if="icon"
         :class="[
           {
             'is-leaf': node?.isLeaf,
diff --git a/packages/components/tree/src/tree-node.vue b/packages/components/tree/src/tree-node.vue
index 671e39bc14..5f2bb6dd97 100644
--- a/packages/components/tree/src/tree-node.vue
+++ b/packages/components/tree/src/tree-node.vue
@@ -30,6 +30,7 @@
       :style="{ paddingLeft: (node.level - 1) * tree.props.indent + 'px' }"
     >
       <el-icon
+        v-if="tree.props.icon || CaretRight"
         :class="[
           {
             'is-leaf': node.isLeaf,