<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) {
      // vnodes.push(<svg-icon icon-class={icon}/>)
      vnodes.push(<i class={icon} />)
    }

    if (title) {
      vnodes.push(<span slot='title'>{title}</span>)
    }
    return vnodes
  }
}
</script>
<style scoped>
  .el-submenu__title i , .el-menu-item i{
    color: #fff;
    margin-right: 6px;
    margin-left: 16px;
  }
  .el-menu-item.is-active i{
    color: rgb(64, 158, 255)
  }
</style>

