<template>
  <view class="flex-c">
    <text :style="styleObj()" class="me-icon" :class="[type]" @click="_onClick">
    </text>
  </view>
</template>

<script setup>
const emit = defineEmits(["click"]);

const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: 'var(--summaryColor)'
  },
  size: {
    type: [Number, String],
    default: '48rpx'
  }
});

const _onClick = () => {
  emit("click");
};

const styleObj = () => {
  return `color: ${props.color}; font-size: ${props.size}; line-height: ${props.size};`
};
</script>

<style lang="scss" scoped>
@import './me-icon.css';

@font-face {
  font-family: me-icon;
  src: url('./me-icon.ttf');
}

.me-icon {
  font-family: me-icon;
  text-decoration: none;
  text-align: center;
}
</style>
