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;}>()
+	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"
-	}
-
-
+		regular: "r",
+		light: "l",
+		solid: "s",
+		thin: "t",
+	};
+	const pixi = propo.size ? `${propo.size}${propUnit}` : "inherit";
 </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>
+	<i
+		:style="{
+			fontSize: `${size}${propUnit}`,
+			color: icolor || 'currentcolor',
+		}"
+		:class="`fa${styleMap[istyle]} fa-${name}`"
+	/>
 </template>