<template>
  <i
    :class="{ iconfont: true, [`xm-${name}`]: true}"
    :style="{ color: color || undefined, fontSize }"></i>
</template>

<script>
export default {
  name: 'xm-icon',
  props: [
    'name',
    'color',
    'size',
  ],
  computed: {
    fontSize() {
      switch (this.size) {
        case 'large':
          return '64px'
        case 'medium':
          return '48px'
        case 'small':
          return '24px'
        case 'min':
        default:
          return '16px'
      }
    }
  }
}
</script>
