init project

src/components/GenderIcon.vue

@@ -0,0 +1,58 @@
+<template>
+	<t-icon
+		v-if="iconName"
+		:name="iconName"
+		:size="size"
+		:class="['gender-icon', `gender-icon--${tone}`]"
+	/>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	size?: string;
+	value?: string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: "1rem",
+	value: ""
+});
+
+const normalizedValue = computed(() => (props.value || "").trim());
+const iconName = computed(() => {
+	if (normalizedValue.value === "MALE" || normalizedValue.value === "男") {
+		return "gender-male";
+	}
+	if (normalizedValue.value === "FEMALE" || normalizedValue.value === "女") {
+		return "gender-female";
+	}
+	return "";
+});
+const tone = computed(() => normalizedValue.value === "FEMALE" || normalizedValue.value === "女" ? "female" : "male");
+</script>
+
+<style scoped lang="less">
+.gender-icon {
+	flex: none;
+
+	&--male {
+		color: #2563eb;
+	}
+
+	&--female {
+		color: #db2777;
+	}
+}
+
+:global(html.theme-dark) {
+	.gender-icon {
+		&--male {
+			color: #93c5fd;
+		}
+
+		&--female {
+			color: #f9a8d4;
+		}
+	}
+}
+</style>