<template>
  <uni-icon v-on="$listeners">
    <i
      :class="`uni-icon-${type}`"
      :style="{'font-size': _converPx(size),'color': color}"
      role="img"
    />
  </uni-icon>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    type: {
      type: String,
      required: true,
      default: ''
    },
    size: {
      type: [String, Number],
      default: 23
    },
    color: {
      type: String,
      default: ''
    }
  },
  methods: {
    _converPx (value) {
      if (/\d+[ur]px$/i.test(value)) {
        value.replace(/\d+[ur]px$/i, text => {
          return `${uni.upx2px(parseFloat(text))}px`
        })
        // eslint-disable-next-line no-useless-escape
      } else if (/^-?[\d\.]+$/.test(value)) {
        return `${value}px`
      }
      return value || ''
    }
  }
}
</script>

<style>
uni-icon {
  display: inline-block;
  font-size: 0;
  box-sizing: border-box;
}

uni-icon[hidden] {
  display: none;
}

uni-icon > i {
  font: normal normal normal 14px/1 "weui";
}

uni-icon > i:before {
  margin: 0;
  box-sizing: border-box;
}

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: "weui";
  src: url("data:application/octet-stream;base64,[encoded data, 5504 characters]")
    format("truetype");
}

.uni-icon-success:before {
  content: "\EA06";
}

.uni-icon-success_circle:before {
  content: "\EA07";
}

.uni-icon-success_no_circle:before {
  content: "\EA08";
}

.uni-icon-safe_success:before {
  content: "\EA04";
}

.uni-icon-safe_warn:before {
  content: "\EA05";
}

.uni-icon-info:before {
  content: "\EA03";
}

.uni-icon-info_circle:before {
  content: "\EA0C";
}

.uni-icon-warn:before {
  content: "\EA0B";
}

.uni-icon-waiting:before {
  content: "\EA09";
}

.uni-icon-waiting_circle:before {
  content: "\EA0A";
}

.uni-icon-circle:before {
  content: "\EA01";
}

.uni-icon-cancel:before {
  content: "\EA0D";
}

.uni-icon-download:before {
  content: "\EA02";
}

.uni-icon-search:before {
  content: "\EA0E";
}

.uni-icon-clear:before {
  content: "\EA0F";
}

.uni-icon-success {
  color: #007aff;
}

.uni-icon-success_circle {
  color: #007aff;
}

.uni-icon-success_no_circle {
  color: #007aff;
}

.uni-icon-safe_success {
  color: #007aff;
}

.uni-icon-safe_warn {
  color: #ffbe00;
}

.uni-icon-info {
  color: #10aeff;
}

.uni-icon-info_circle {
  color: #007aff;
}

.uni-icon-warn {
  color: #f76260;
}

.uni-icon-waiting {
  color: #10aeff;
}

.uni-icon-waiting_circle {
  color: #10aeff;
}

.uni-icon-circle {
  color: #c9c9c9;
}

.uni-icon-cancel {
  color: #f43530;
}

.uni-icon-download {
  color: #007aff;
}

.uni-icon-search {
  color: #b2b2b2;
}

.uni-icon-clear {
  color: #b2b2b2;
}
</style>
