<template>
    <svg :class="svgClass" aria-hidden="true" @click="handleClick">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs } from 'vue'

// Hooks
function useIcon(props, context) {
    const svgClass = ref(`ys-icon ${props.className}`)
    const iconName = ref(`#${props.iconClass}`)
    const handleClick = () => {
        context.emit('handleClick')
    }
    return {
        handleClick,
        svgClass,
        iconName,
    }
}

export default defineComponent({
    props: {
        iconClass: {
            type: String,
            required: true,
        },
        className: {
            type: String,
            default: '',
        },
    },
    setup(props, context): any {
        const useIconData = useIcon(props, context)
        return {
            ...toRefs(useIconData),
        }
    },
})
</script>

<style scoped lang="scss">
.ys-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 20px;
    &:focus {
        outline: none;
    }
}
</style>
