<script>
export default {
  name: "MenuItem",
  functional: true,
  props: {
    icon: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  render(h, context) {
    const { icon, title } = context.props;
    const vnodes = [];
    /* 
    if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    } */
    if (icon) {
      if (icon.includes("el-icon")) {
        vnodes.push(<i class={[icon, "sub-el-icon"]} />);
      } else {
        // 添加自定义类名以控制图标大小
        vnodes.push(<i data-feather={icon} class="feather-icon"></i>);
      }
    }

    if (title) {
      vnodes.push(<span slot="title">{title}</span>);
    }
    return vnodes;
  },
};
</script>

<style scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
/* 修改 feather 图标样式 */
[data-feather] {
  width: 1em;
  height: 1em;
  margin-right: 5px;
  stroke: currentColor;
}
/* 自定义 feather 图标样式 */
.feather-icon {
  display: inline-block;
  width: 16px !important; /* 使用 !important 确保覆盖 feather 默认样式 */
  height: 16px !important;
  margin-right: 8px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* 如果需要在悬停时改变大小 */
/* .feather-icon:hover {
  width: 18px !important;
  height: 18px !important;
} */

/* 如果需要响应式大小 */
@media screen and (min-width: 768px) {
  .feather-icon {
    width: 20px !important;
    height: 20px !important;
  }
}
</style>
