u

code/base-project/base-vue/packages/ao-design/src/icon/index.scss

@@ -6,6 +6,12 @@ $icon-prefix: #{$prefix}-icon;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 1em;
+  height: 1em;
+  svg {
+    width: 1em;
+    height: 1em;
+  }
   &-spin {
     animation: spin 1s linear infinite;
     --rotate-angle: 360deg;

code/base-project/base-vue/packages/ao-design/src/icon/index.tsx

@@ -2,30 +2,39 @@ import type { PropType } from 'vue'
 import { Icon } from '@iconify/vue'
 import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
-import './index.scss'
 
 export default defineComponent({
   name: 'Icon',
   props: {
     icon: { type: String as PropType<string>, required: true },
-    size: { type: Number, default: 16 },
+    size: { type: Number },
     color: { type: String, default: 'currentColor' },
     spin: { type: Boolean, default: false },
   },
-  setup(props) {
+  setup(props, { slots }) {
     const prefixCls = getPrefixCls('icon')
-
+    const fontStyle = {
+      ...(props.size ? { fontSize: `${props.size}px` } : {}), // size 存在才设置
+      verticalAlign: 'middle',
+    }
     return () => (
       <i
         class={[prefixCls, props.spin && `${prefixCls}-spin`]}
+        style={fontStyle}
       >
-        <Icon
-          icon={props.icon}
-          width={props.size}
-          height={props.size}
-          color={props.color}
-          style={{ verticalAlign: 'middle' }}
-        />
+        {slots.default
+          ? (
+              slots.default()
+            )
+          : props.icon
+            ? (
+                <Icon
+                  icon={props.icon}
+                  color={props.color}
+                  style={{ verticalAlign: 'middle' }}
+                />
+              )
+            : null}
       </i>
     )
   },