u

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

@@ -0,0 +1,12 @@
+@use '../_styles/theme/index' as *;
+
+.#{$prefix}-icon-spin {
+  animation: spin 1s linear infinite;
+  --rotate-angle: 360deg;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(var(--rotate-angle));
+  }
+}

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

@@ -1,22 +1,32 @@
 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: 'AIcon',
+  name: 'Icon',
   props: {
     icon: { type: String as PropType<string>, required: true },
-    width: { type: String, default: '24px' },
-    height: { type: String, default: '24px' },
-    color: { type: String, default: 'currentColor' }, // 默认颜色使用 currentColor，支持继承父元素的颜色
+    width: { type: Number, default: 16 },
+    height: { type: Number, default: 16 },
+    color: { type: String, default: 'currentColor' },
+    spin: { type: Boolean, default: false },
+    rotate: { type: Number, default: 360 },
   },
   setup(props) {
+    const prefixCls = getPrefixCls('icon')
     return () => (
       <Icon
         icon={props.icon}
         width={props.width}
         height={props.height}
-        style={{ color: props.color, verticalAlign: 'middle' }}
+        style={{
+          'color': props.color,
+          'verticalAlign': 'middle',
+          '--rotate-angle': `${props.rotate}deg`,
+        }}
+        class={props.spin ? `${prefixCls}-spin` : ''}
       />
     )
   },