<template>
  <div :class="[classList]">
    <template v-if="toRoute === undefined">
      <div class="ico-clickable" @click="OnClick">
        <i :class="['ico-c', iconClass]">
          <svg>
            <use :href="icourl + '#' + icon" />
          </svg>
        </i>
      </div>
    </template>
    <template v-else>
      <router-link :to="toRoute">
        <i :class="['ico-c', iconClass]">
          <svg>
            <use :href="icourl + '#' + icon" />
          </svg>
        </i>
      </router-link>
    </template>
  </div>
</template>
<script setup lang="ts">
  import icourl from '@/assets/images/icons.svg'

  export interface Props {
    icon: string
    iconClass?: string
    classList?: string
    toRoute?: string
  }
  const props = withDefaults(defineProps<Props>(), {
    iconClass: '',
    classList: ''
  })

  const emit = defineEmits(['click'])

  const OnClick = (e: Event) => {
    emit('click', e)
  }
</script>
