44 lines
1009 B
Vue
44 lines
1009 B
Vue
<script setup lang="ts">
|
|
import { ref, computed, withDefaults } from "vue";
|
|
|
|
interface Props {
|
|
prefix?: string;
|
|
name?: string;
|
|
color?: string;
|
|
hoverColor?: string;
|
|
size?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
prefix: "icon",
|
|
name: "",
|
|
color: "#000",
|
|
});
|
|
|
|
const isHover = ref(false);
|
|
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
|
|
const svgStyle = computed(() => {
|
|
if (!!props.size) return { width: props.size + "px", height: props.size + "px" };
|
|
else return null;
|
|
});
|
|
|
|
const compColor = computed(() => {
|
|
if (!props.hoverColor) return props.color;
|
|
else {
|
|
return !!isHover.value ? props.hoverColor : props.color;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
@mouseover="isHover = true"
|
|
@mouseout="isHover = false"
|
|
aria-hidden="true"
|
|
:color="compColor"
|
|
:style="svgStyle"
|
|
>
|
|
<use :xlink:href="symbolId" :fill="compColor" :color="compColor" />
|
|
</svg>
|
|
</template>
|