Захаров Дмитрий Анатольевич
46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<template>
|
|
<div :class="[$style.CustomFeatureImage, classes]">
|
|
<CustomIcon :icon="icon" size="large" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
|
|
import { computed, useCssModule } from 'vue';
|
|
import CustomIcon from './CustomIcon.vue';
|
|
|
|
const { size = 'medium' } = defineProps<{
|
|
icon: Icons,
|
|
size?: 'medium' | 'small'
|
|
}>()
|
|
|
|
const style = useCssModule()
|
|
const classes = computed(() => ({
|
|
[style.CustomAvatar]: true,
|
|
[style.CustomAvatarSmall]: size === 'small'
|
|
}))
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
@use '@beeline/design-tokens/scss/tokens/components/avatar';
|
|
@use "@beeline/design-tokens/scss/tokens/themes";
|
|
|
|
.CustomAvatar {
|
|
border-radius: avatar.$avatar-squircle-border-radius;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
height: avatar.$avatar-medium-height;
|
|
width: avatar.$avatar-medium-width;
|
|
letter-spacing: avatar.$avatar-medium-text-font-letter-spacing;
|
|
line-height: avatar.$avatar-medium-text-font-line-height;
|
|
font-size: avatar.$avatar-medium-text-font-size;
|
|
background-color: themes.$color-status-neutral-background;
|
|
|
|
&Small {
|
|
height: avatar.$avatar-small-height;
|
|
width: avatar.$avatar-small-width;
|
|
}
|
|
}
|
|
</style> |