style(components): fixup icon

components/icon.vue

@@ -1,23 +1,32 @@
-<script lang="ts" setup>
-import { string } from 'yup';
-	const propo = defineProps<{name: string; istyle: "regular" | "light" | "solid" | "thin"; size?: number;}>()
-	const styleMap = {
-		"regular": "r",
-		"light": "l",
-		"solid": "s",
-		"thin": "t"
-	}
-
-
-</script>
-
-<template>
-	<span :style="{display: 'inline-block', width: `${size || 20}px`, height: `${size || 20}px`}">
-		<i :style="{
-			fontSize: `${size || 20}px`, 
-			display: 'inline-block', 
-			width: 'inherit', 
-			height: 'inherit'
-		}" :class="`fa${styleMap[istyle]} fa-${name}`"/>
-	</span>
-</template>
+<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="{
+			fontSize: `${size}${propUnit}`,
+			color: icolor || 'currentcolor',
+		}"
+		:class="`fa${styleMap[istyle]} fa-${name}`"
+	/>
+</template>