<template>
	<text
		:style="{ color: color, 'font-size': iconSize }"
		class="uni-icons"
		:class="['uniui-' + type, customPrefix, customPrefix ? type : '']"
		@click="_onClick"
	></text>
</template>

<script setup lang="ts">
import { computed } from "vue";
const getVal = (val: any) => {
	const reg = /^[0-9]*$/g;
	return typeof val === "number" || reg.test(val) ? val + "px" : val;
};

const props = defineProps({
	type: {
		type: String,
		default: ""
	},
	color: {
		type: String,
		default: "#333333"
	},
	size: {
		type: [Number, String],
		default: 16
	},
	customPrefix: {
		type: String,
		default: ""
	}
});

const emits = defineEmits(["click"]);

const iconSize = computed({
	get() {
		return getVal(props.size);
	},
	set() {}
});

function _onClick() {
	emits("click");
}
</script>

<style lang="scss">
@import "./uniicons.css";

@font-face {
	font-family: uniicons;
	src: url("./uniicons.ttf") format("truetype");
}
.uni-icons {
	font-family: uniicons;
	text-align: center;
	text-decoration: none;
}
</style>
