<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 if(icon.includes("viewicon")){
        let _icon=icon.split("/")[1];
        vnodes.push(<Icon type={_icon} class='sub-el-icon' size="18" />)
      }
      else if(icon.includes("iconfont")){
        let _icon=icon.split("/")[1];
        vnodes.push(<i class={[_icon, 'iconfont','sub-el-icon']} size="18" />)
      }
      else {
        if(icon.includes("fa")){
          
              var _icon="el-icon-menu";
              vnodes.push(<i class={[_icon, 'sub-el-icon']} />)
        }else
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }else {
        var _icon="el-icon-menu";
        vnodes.push(<i class={[_icon, 'sub-el-icon']} />)
      }

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

<style scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
</style>
