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

feat: add spin prop for Icon (#477)

Co-authored-by: N刘亚 <liuya54892@outlook.com>
上级 021c6364
<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>
<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 {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册