u

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

@@ -1,8 +1,15 @@
 @use '../_styles/theme/index' as *;
 
-.#{$prefix}-icon-spin {
-  animation: spin 1s linear infinite;
-  --rotate-angle: 360deg;
+$icon-prefix: #{$prefix}-icon;
+
+.#{$icon-prefix} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  &-spin {
+    animation: spin 1s linear infinite;
+    --rotate-angle: 360deg;
+  }
 }
 
 @keyframes spin {

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

@@ -11,29 +11,20 @@ export default defineComponent({
     size: { 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 () => (
       <i
-        class={props.spin ? `${prefixCls}-spin` : ''}
-        style={{
-          'display': 'inline-flex',
-          'alignItems': 'center',
-          'justifyContent': 'center',
-          'color': props.color,
-          '--rotate-angle': `${props.rotate}deg`,
-        }}
+        class={[prefixCls, props.spin && `${prefixCls}-spin`]}
       >
         <Icon
           icon={props.icon}
           width={props.size}
           height={props.size}
-          style={{
-            verticalAlign: 'middle',
-          }}
+          color={props.color}
+          style={{ verticalAlign: 'middle' }}
         />
       </i>
     )