<template>
	<text class="ch-icon iconfont" :class="iconCls" :style="style">
	</text>
</template>

<script setup name="ch-icon">
import { computed, defineProps } from 'vue';

const props = defineProps({
	size: {
		type: Number,
		default: 28
	},
	name: {
		type: String,
		default: ''
	},
	color: {
		type: String,
		default: '#666'
	}
})

const iconCls = computed(() => {
	return props.name ? `icon-${props.name}` : ''
})

const style = computed(() => {
	return `font-size: ${props.size}px; color: ${props.color}`
})
</script>

<style lang="scss" scoped>
@import './ch-icon.scss';
</style>