<template>
  <i :class="['beeline-icons', `beeline-icons-${icon}`, classes]"></i>
</template>

<script setup lang="ts">
import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
import { computed, useCssModule } from 'vue';

const { size = 'medium' } = defineProps<{
  icon: Icons,
  size?: 'large' | 'medium' | 'small'
}>()

const style = useCssModule()
const classes = computed(() => ({
  [style.CustomIcon]: true,
  [style.CustomIconLarge]: size === 'large',
  [style.CustomIconSmall]: size === 'small'
}))
</script>

<style lang="scss" module>
@use "@beeline/design-tokens/scss/tokens/components/icon";

.CustomIcon {
  font-size: icon.$icon-medium-size !important;
  
  &Large {
    font-size: icon.$icon-large-size !important;
  }

  &Small {
    font-size: icon.$icon-small-size !important;
  }
}
</style>