未验证 提交 6dd7d0f9 编写于 作者: L LiuYa 提交者: GitHub

feat: add spin prop for Icon (#477)

Co-authored-by: N刘亚 <liuya54892@outlook.com>
上级 021c6364
<template> <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" /> <use :xlink:href="symbolId" />
</svg> </svg>
</template> </template>
...@@ -23,6 +27,10 @@ ...@@ -23,6 +27,10 @@
type: [Number, String], type: [Number, String],
default: 16, default: 16,
}, },
spin: {
type: Boolean,
default: false,
},
}, },
setup(props) { setup(props) {
const { prefixCls } = useDesign('svg-icon'); const { prefixCls } = useDesign('svg-icon');
...@@ -52,4 +60,8 @@ ...@@ -52,4 +60,8 @@
vertical-align: -0.15em; vertical-align: -0.15em;
fill: currentColor; fill: currentColor;
} }
.svg-icon-spin {
animation: loadingCircle 1s infinite linear;
}
</style> </style>
<template> <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 <span
v-else v-else
ref="elRef" ref="elRef"
:class="[$attrs.class, 'app-iconify anticon']" :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']"
:style="getWrapStyle" :style="getWrapStyle"
></span> ></span>
</template> </template>
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
type: [String, Number] as PropType<string | number>, type: [String, Number] as PropType<string | number>,
default: 16, default: 16,
}, },
spin: propTypes.bool.def(false),
prefix: propTypes.string.def(''), prefix: propTypes.string.def(''),
}, },
setup(props) { setup(props) {
...@@ -99,6 +100,12 @@ ...@@ -99,6 +100,12 @@
.app-iconify { .app-iconify {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&-spin {
svg {
animation: loadingCircle 1s infinite linear;
}
}
} }
span.iconify { span.iconify {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册