<template>
    <i :class="ns.b()" :style="style" v-bind="$attrs">
        <slot/>
    </i>
</template>

<script lang="ts">
export default {
    name: "MoIcon",
};
</script>
<script lang="ts" setup>
import {computed} from 'vue'
import {addUnit, isUndefined} from '@moui/utils'
import {useNamespace} from '@moui/hooks'
import {iconProps} from './icon.ts'
import type {CSSProperties} from 'vue'

const props = defineProps(iconProps)
const ns = useNamespace('icon')

const style = computed<CSSProperties>(() => {
    const {size, color} = props
    if (!size && !color) return {}

    return {
        fontSize: isUndefined(size) ? undefined : addUnit(size),
        color: color
    }
})
</script>
