<template>
  <z-menu-item>
    <template #icon>
      <i class="iconfont" :class="icon" />
    </template>
    <span v-if="title">{{ title }}</span>
  </z-menu-item>
</template>
<script>
// import { h } from 'vue'
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  }
  // render() {
  //   const vnodes = []

  //   if (this.icon) {
  //     const elHtml = h('i', {
  //       'class': `iconfont ${this.icon}`,
  //       'style': 'margin-right: 15px'
  //     })
  //     vnodes.push(elHtml)
  //   }

  //   if (this.title) {
  //     vnodes.push(<span slot='title'>{(this.title)}</span>)
  //   }
  //   return vnodes
  // }
}
</script>
<style scoped>
.iconfont {
  font-size: 20px;
  color: rgb(191, 203, 217);
}
</style>
