traxxx/assets/components/actors/gender.vue

<template>
    <span
        v-if="gender"
        class="gender"
        :class="{ [gender]: true }"
    ><Icon :icon="gender" /></span>
</template>

<script>
export default {
    props: {
        gender: {
            type: String,
            default: null,
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.gender {
    &.female .icon {
        fill: $female;
        filter: drop-shadow(0 0 1px $shadow);
    }

    &.male .icon {
        fill: $male;
        filter: drop-shadow(0 0 1px $shadow);
    }

    &.transsexual .icon {
        fill: $text-contrast;
        filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
            drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male)
            drop-shadow(0 0 1px $shadow)
    }
}
</style>