<script>
import { getFontFamily, getClassPrefix } from './util'

export default {
  name: 'UiIcon',
  functional: true,
  props: {
    name: {
      type: String,
      required: true
    },
    size: {
      type: Number
    },
    color: {
      type: String
    }
  },
  render(h, context) {
    const { props, data } = context
    const style = {}
    if (props.size) {
      style['font-size'] = props.size + 'px'
    }
    if (props.color) {
      style.color = props.color
    }

    const classPrefix = getClassPrefix() || ''
    let nextClass = ['ui-icon', getFontFamily(), `${classPrefix}${props.name}`]
    const className = data.staticClass || data.class
    if (className) {
      if (Array.isArray(className)) {
        nextClass = nextClass.concat(className)
      } else {
        nextClass.push(className)
      }
    }
    return h('span', {
      class: nextClass,
      style,
      attrs: context.data.attrs,
      on: {
        click(evt) {
          if (context.listeners.click) {
            context.listeners.click(evt)
          }
        }
      }
    })
  }
}
</script>
<style lang="less">
.ui-icon.icon-loading{
  display: inline-block;
  animation: ui-loading-rotating 1s linear infinite;
}
@keyframes ui-loading-rotating{
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(1turn);
  }
}
</style>
