<template>
  <Tooltip v-if="tooltip" :content="tooltip" :transfer="true">
    <span class="icon-button hover-able" @click="click">
      <Icon :type="type" :custom="custom" :size="size" />
    </span>
  </Tooltip>
  <span v-else class="icon-button hover-able">
    <Icon :type="type" :custom="custom" @click="click" :size="size" />
  </span>
</template>

<script lang="ts">
import Vue from "vue";
import { Tooltip, Icon } from "view-design";

export default Vue.extend({
  name: "clickable-icon",
  components: { Tooltip, Icon },
  props: {
    tooltip: String,
    type: String,
    custom: String,
    size: {
      type: [Number, String],
      default: "24",
    },
    to: {
      type: String,
      required: false,
    },
  },
  methods: {
    click() {
      if (this.to) {
        this.$go(this.to);
      } else {
        this.$emit("click");
      }
    },
  },
});
</script>
<style lang="less">
.icon-button {
  cursor: pointer;
  line-height: 1.5;
}
</style>
