38 lines
611 B
Vue

<template>
<button class="action-button">
<component :is="icon" />
<slot></slot>
</button>
</template>
<script setup lang="ts">
import { defineAsyncComponent, defineProps } from 'vue'
const props = defineProps<{
name: string
}>()
const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg`))
</script>
<style scoped>
button {
background: none;
border: none;
color: #ccc;
cursor: pointer;
transition: all 0.2s ease;
padding: 0.5rem;
}
button:hover {
color: #fff;
}
svg {
fill: #ccc;
transform: fill 0.2s ease;
}
button:hover svg {
fill: #fff;
}
</style>