<script>
export default {
  name: "Icon",
  props: {
    icon: String
  },
  render(h) {
    if (this.icon) {
      if (this.icon.includes('el-icon')) {
        return <i class={[this.icon, 'sub-el-icon']} />
      }
      else if(this.icon.includes("iviewicon")){
        let icon = this.icon.split("/")[1];
        return <Icon type={icon} class='sub-el-icon' size="18" />
      }
      else if(this.icon.includes("iconfont")){
        let icon = this.icon.split("/")[1]+" iconfont";
        return <Icon custom={icon} class='sub-el-icon' size="18" />
      }
      else {
        return <i class="sub-el-icon"><svg-icon class-name="sub-el-icon__svg" icon-class={this.icon}/></i>
      }
    }
  },
  data() {
    return {}
  },
  methods: {},
  computed: {}
}
</script>

<style scoped lang="scss">
.sub-el-icon {
  margin-right: 5px;
  width: 18px !important;
  text-align: center;
  vertical-align: middle;
  color: currentColor;
  display: inline-block;

  &__svg {
  }
}
</style>
