<template>
  <i
    :class="[prefix, `${prefix}-${name}`]"
    :style="style"
    >
    <slot />
  </i>
</template>
<script>
import { create } from '../utils'

export default create({
  name: 'icon',
  props: {
    name: String,
    color: String,
    size: String,
    prefix: {
      type: String,
      default: 'bx-icon',
    },
  },
  computed: {
    style() {
      const appearance = {}
      if (this.color) {
        appearance.color = this.color
      }
      if (this.size) {
        appearance.fontSize = this.size
      }
      return appearance
    },
  },
})
</script>
<style>
@import './index.css';
</style>
