<script lang="ts" setup name="IconButton">
defineProps({
  /**
   * 图标，与assets/icons中文件名一致
   */
  icon: {
    type: String,
    default: 'icon-add',
  },
  /**
   * 提示文字
   */
  title: {
    type: String,
    default: '新增',
  },
})
const emit = defineEmits(['click'])
// 点击事件
function click() {
  emit('click')
}
</script>

<template>
  <el-button class="icon-button" type="primary" :title="title" @click="click">
    <template #icon>
      <svg-icon :name="icon" class="icon-button-icon" />
    </template>
  </el-button>
</template>

<style lang="scss" scoped>
.icon-button {
  background-color: #d6e5fc;
  border-color: #d6e5fc;
  padding: 6px;
  border-radius: 6px;
  color: #4384ff;

  :deep(.el-icon) {
    width: 18px;
    height: 18px;
  }

  .icon-button-icon {
    width: 16px;
    height: 16px;
  }

  &:hover {
    background-color: #c3dafd;
    color: #fff;
  }
}
</style>