style(components): fixup icon

components/icon.vue

@@ -1,23 +1,32 @@
-<script lang="ts" setup>
+<script lang="ts" setup>
-import { string } from 'yup';
+	import { theme } from "ant-design-vue";
-	const propo = defineProps<{name: string; istyle: "regular" | "light" | "solid" | "thin"; size?: number;}>()
+	const { useToken } = theme;
-	const styleMap = {
+	const { token } = useToken();
-		"regular": "r",
+
-		"light": "l",
+	const col = token.value.colorText;
-		"solid": "s",
+	const propo = defineProps<{
-		"thin": "t"
+		name: string;
-	}
+		icolor?: string;
-
+		istyle: "regular" | "light" | "solid" | "thin";
-
+		size?: number;
-</script>
+		proportionate?: boolean;
-
+	}>();
-<template>
+	const propUnit = propo.proportionate ? "em" : "px";
-	<span :style="{display: 'inline-block', width: `${size || 20}px`, height: `${size || 20}px`}">
+	const styleMap = {
-		<i :style="{
+		regular: "r",
-			fontSize: `${size || 20}px`, 
+		light: "l",
-			display: 'inline-block', 
+		solid: "s",
-			width: 'inherit', 
+		thin: "t",
-			height: 'inherit'
+	};
-		}" :class="`fa${styleMap[istyle]} fa-${name}`"/>
+	const pixi = propo.size ? `${propo.size}${propUnit}` : "inherit";
-	</span>
+</script>
-</template>
+
+<template>
+	<i
+		:style="{
+			fontSize: `${size}${propUnit}`,
+			color: icolor || 'currentcolor',
+		}"
+		:class="`fa${styleMap[istyle]} fa-${name}`"
+	/>
+</template>