From 6dd7d0f928ebb4c6d7be66f4cd134fb291fc7dc2 Mon Sep 17 00:00:00 2001
From: LiuYa <liuya54892@gmail.com>
Date: Tue, 13 Apr 2021 21:42:50 +0800
Subject: [PATCH] feat: add spin prop for Icon (#477)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 刘亚 <liuya54892@outlook.com>
---
 src/components/Icon/src/SvgIcon.vue | 14 +++++++++++++-
 src/components/Icon/src/index.vue   | 11 +++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Icon/src/SvgIcon.vue b/src/components/Icon/src/SvgIcon.vue
index 300e8de4..cb5331d0 100644
--- 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
index c76a94f9..ca7fedfd 100644
--- 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 {
-- 
GitLab