next/components/icon.vue

<script lang="ts" setup>
	import { theme } from "ant-design-vue";
	const { useToken } = theme;
	const { token } = useToken();

	const col = token.value.colorText;
	const propo = defineProps<{
		name: string;
		icolor?: string;
		istyle: "regular" | "light" | "solid" | "thin";
		size?: number;
		proportionate?: boolean;
	}>();
	const propUnit = propo.proportionate ? "em" : "px";
	const styleMap = {
		regular: "r",
		light: "l",
		solid: "s",
		thin: "t",
	};
	const pixi = propo.size ? `${propo.size}${propUnit}` : "inherit";
</script>

<template>
	<i
		:style="{
			...$attrs.style,
			fontSize: pixi,
			color: icolor || 'currentcolor',
		}"
		:class="`fa${styleMap[istyle]} fa-${name}`"
	/>
</template>