<!--
|
* @Description:
|
* @Version: 2.0
|
* @Autor: wuyun
|
* @Date: 2023-06-09 09:50:40
|
* @LastEditors: wuyun
|
* @LastEditTime: 2023-06-15 14:36:35
|
-->
|
<template>
|
<svg :class="svgClass" v-bind="$attrs" :style="iconStyle">
|
<use :href="iconName" rel="external nofollow" />
|
</svg>
|
</template>
|
<script setup lang="ts">
|
import { computed, CSSProperties } from 'vue';
|
interface Props {
|
name: string;
|
size?: string;
|
color: string;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
name: '',
|
size: '18px',
|
color: '#007CEE',
|
});
|
const {name,size,color}=toRefs(props)
|
const iconStyle = computed((): CSSProperties => {
|
return {
|
color:color.value || '#007CEE',
|
fontSize:size.value || '20px',
|
fill: color.value || '#007CEE' ,
|
stroke: color.value
|
};
|
});
|
const iconName = computed(() => `#icon-${name.value}`)
|
const svgClass = computed(() => {
|
if (name.value) {
|
return `svg-icon ${iconName.value}`
|
}
|
return "svg-icon"
|
})
|
</script>
|
<style scoped>
|
.svg-icon {
|
width: 1em;
|
height: 1em;
|
fill: 'currentColor';
|
vertical-align: middle;
|
}
|
</style>
|
