feat: add spin prop for Icon (#477)

Co-authored-by: 刘亚 <liuya54892@outlook.com>
vbenjs · Apr 13, 2021 · 6dd7d0f · 6dd7d0f
1 parent 021c636
commit 6dd7d0f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/components/Icon/src/SvgIcon.vue b/src/components/Icon/src/SvgIcon.vue
@@ -1,5 +1,9 @@
 <template>
-  <svg :class="[prefixCls, $attrs.class]" :style="getStyle" aria-hidden="true">
+  <svg
+    :class="[prefixCls, $attrs.class, spin && 'svg-icon-spin']"
+    :style="getStyle"
+    aria-hidden="true"
+  >
     <use :xlink:href="symbolId" />
   </svg>
 </template>
@@ -23,6 +27,10 @@
         type: [Number, String],
         default: 16,
       },
+      spin: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const { prefixCls } = useDesign('svg-icon');
@@ -52,4 +60,8 @@
     vertical-align: -0.15em;
     fill: currentColor;
   }
+
+  .svg-icon-spin {
+    animation: loadingCircle 1s infinite linear;
+  }
 </style>
diff --git a/src/components/Icon/src/index.vue b/src/components/Icon/src/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class]" />
+  <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class]" :spin="spin" />
   <span
     v-else
     ref="elRef"
-    :class="[$attrs.class, 'app-iconify anticon']"
+    :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']"
     :style="getWrapStyle"
   ></span>
 </template>
@@ -39,6 +39,7 @@
         type: [String, Number] as PropType<string | number>,
         default: 16,
       },
+      spin: propTypes.bool.def(false),
       prefix: propTypes.string.def(''),
     },
     setup(props) {
@@ -99,6 +100,12 @@
   .app-iconify {
     display: inline-block;
     vertical-align: middle;
+
+    &-spin {
+      svg {
+        animation: loadingCircle 1s infinite linear;
+      }
+    }
   }
 
   span.iconify {