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></slot>

        <p class="tip" v-if="tip && os.isPc && !os.isTablet">{{ tip }}</p>
    </i>
</template>

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

const style = computed(() => ({
    'font-size': normalizeUnitToStyle(props.size),
    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'])
// defineOptions({
//   name: 'UIIcon',
// });
</script>
<style>
/* @import url('./iconfont/iconfont.css'); */
</style>