<template>
  <i
    class="xpark-icon"
    :class="clazz"
    :style="{
      color: color,
      fontSize: size + 'px'
    }"
  ></i>
</template>

<script>
export default {
  name: 'IconX',
  props: {
    size: {
      type: [Number, String],
      default: 24
    },
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#000'
    }
  },
  computed: {
    clazz() {
      return `x-iconfont ${this.name}`;
    }
  }
};
</script>

<style scoped lang="less">
.xpark-icon {
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-block;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  font-size: inherit;
}
</style>
