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/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>