refactor(components): refactor icon (#3528)

packages/components/icon/__tests__/icon.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import Icon from '../src/index.vue'
+import Icon from '../src/icon.vue'
 
 describe('Icon.vue', () => {
   test('render', () => {

packages/components/icon/index.ts

@@ -1,13 +1,8 @@
-import Icon from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Icon from './src/icon.vue'
 
-Icon.install = (app: App): void => {
-  app.component(Icon.name, Icon)
-}
+export const ElIcon = withInstall(Icon)
+export default ElIcon
 
-const _Icon = Icon as SFCWithInstall<typeof Icon>
-
-export default _Icon
-export const ElIcon = _Icon
+export * from './src/icon'

packages/components/icon/src/icon.ts

@@ -0,0 +1,11 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const iconProps = {
+  size: {
+    type: Number,
+  },
+  color: {
+    type: String,
+  },
+} as const
+export type IconProps = ExtractPropTypes<typeof iconProps>

packages/components/icon/src/icon.vue

@@ -6,21 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
+import { iconProps } from './icon'
+
 import type { CSSProperties } from 'vue'
+
 export default defineComponent({
   name: 'ElIcon',
   inheritAttrs: false,
-  props: {
-    size: {
-      type: Number,
-    },
-    color: {
-      type: String,
-    },
-  },
+
+  props: iconProps,
+
   setup(props) {
     return {
-      style: computed(() => {
+      style: computed<CSSProperties>(() => {
         if (!props.size && !props.color) {
           return {}
         }