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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>