You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.2 KiB
59 lines
1.2 KiB
6 months ago
|
<template>
|
||
|
|
<svg
|
||
|
|
:class="['ns-icon', $attrs.class, spin && 'ns-icon-spin']"
|
||
|
|
:style="getStyle"
|
||
|
|
aria-hidden="true">
|
||
|
|
<use :xlink:href="symbolId" />
|
||
|
|
</svg>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, computed } from 'vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'NsIcon',
|
||
|
|
props: {
|
||
|
|
prefix: {
|
||
|
|
type: String,
|
||
|
|
default: 'icon',
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 14,
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: String,
|
||
|
|
// required: true,
|
||
|
|
},
|
||
|
|
spin: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
|
||
|
|
|
||
|
|
const getStyle = computed(() => {
|
||
|
|
const { size, fill } = props;
|
||
|
|
let s = `${size}`;
|
||
|
|
s = `${s.replace('px', '')}px`;
|
||
|
|
return {
|
||
|
|
width: s,
|
||
|
|
height: s,
|
||
|
|
fill: fill,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
return { symbolId, getStyle };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.ns-icon-spin {
|
||
|
|
animation: loadingCircle 1s infinite linear;
|
||
|
|
}
|
||
|
|
</style>
|