4dkankan-components/packages/components/basic/icon/src/icon.vue

<template>
    <i class="iconfont ui-kankan-icon icon" :class="className" :style="style" @click="ev => emit('click', ev)">
        <slot />
        <p v-if="tip && os.isPc && !os.isTablet" class="tip">{{ tip }}</p>
    </i>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps } from 'vue'
import { normalizeUnitToStyle, os } from '@kankan-components/utils'
import { iconProps } from './icon'

defineOptions({
    name: 'UIIcon',
})

const props = defineProps(iconProps)

const style = computed(() => ({
    'font-size': normalizeUnitToStyle(props.size || 14),
    color: props.color,
}))
const className = computed(() => {
    const base = {
        small: props.small,
        medium: props.medium,
        big: props.big,
        disabled: props.disabled,
        [`tip-h-${props.tipH}`]: true,
        [`tip-v-${props.tipV}`]: true,
        ['fun-ctrl']: props.ctrl,
    }
    if (props.type) {
        return {
            ...base,
            [`icon-${props.type}`]: props.type,
        }
    } else {
        return base
    }
})

const emit = defineEmits(['click'])
</script>