refactor(components): refactor icon (#5934)

packages/components/icon/src/icon.vue

@@ -4,36 +4,26 @@
   </i>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { isUndefined, addUnit } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { iconProps } from './icon'
-
 import type { CSSProperties } from 'vue'
 
-export default defineComponent({
+defineOptions({
   name: 'ElIcon',
   inheritAttrs: false,
+})
+const props = defineProps(iconProps)
+const ns = useNamespace('icon')
 
-  props: iconProps,
+const style = computed<CSSProperties>(() => {
+  if (!props.size && !props.color) return {}
 
-  setup(props) {
-    const ns = useNamespace('icon')
-
-    const style = computed<CSSProperties>(() => {
-      if (!props.size && !props.color) return {}
-
-      return {
-        fontSize: isUndefined(props.size) ? undefined : addUnit(props.size),
-        '--color': props.color,
-      }
-    })
-
-    return {
-      ns,
-      style,
-    }
-  },
+  return {
+    fontSize: isUndefined(props.size) ? undefined : addUnit(props.size),
+    '--color': props.color,
+  }
 })
 </script>