<template>
  <svg
    class="nav-icon-wrap"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      v-if="icon == 'plugin'"
      transform="translate(6, 0)"
      d="M10 6V10.66L6.5 14.17V16H5.5V14.17L2 10.65V6H10ZM10 0H8V4H4V0H2V4H1.99C0.9 3.99 0 4.89 0 5.98V11.5L3.5 15V18H8.5V15L12 11.49V6C12 4.9 11.1 4 10 4V0Z"
      class="primary-color"
    />

    <path
      v-else-if="icon == 'support'"
      d="M11 23.59V19.99C5.99 19.73 2 15.57 2 10.5C2 5.26 6.26 1 11.5 1C16.74 1 21 5.26 21 10.5C21 15.45 17.56 20.43 12.43 22.9L11 23.59ZM11.5 3C7.36 3 4 6.36 4 10.5C4 14.64 7.36 18 11.5 18H13V20.3C16.64 18 19 14.22 19 10.5C19 6.36 15.64 3 11.5 3ZM10.5 14.5H12.5V16.5H10.5V14.5ZM12.5 13H10.5C10.5 9.75 13.5 10 13.5 8C13.5 6.9 12.6 6 11.5 6C10.4 6 9.5 6.9 9.5 8H7.5C7.5 5.79 9.29 4 11.5 4C13.71 4 15.5 5.79 15.5 8C15.5 10.5 12.5 10.75 12.5 13Z"
      class="primary-color"
    />

    <template v-else-if="icon == 'performance'">
      <path
        d="M20.38 8.57012L19.15 10.4201C19.7432 11.6032 20.0336 12.915 19.9952 14.2378C19.9568 15.5607 19.5908 16.8534 18.93 18.0001H5.07005C4.21122 16.5102 3.85535 14.7832 4.05519 13.0752C4.25504 11.3671 4.99996 9.76895 6.17953 8.51755C7.3591 7.26615 8.91052 6.42816 10.6038 6.12782C12.2971 5.82747 14.042 6.08076 15.5801 6.85012L17.4301 5.62012C15.5465 4.41234 13.3124 3.87113 11.0849 4.08306C8.8575 4.29499 6.76549 5.24782 5.14354 6.78913C3.52159 8.33045 2.46341 10.3712 2.13827 12.5849C1.81312 14.7987 2.2398 17.0575 3.35005 19.0001C3.52456 19.3024 3.77514 19.5537 4.07688 19.7292C4.37862 19.9046 4.72102 19.998 5.07005 20.0001H18.92C19.2725 20.0015 19.619 19.9098 19.9246 19.7342C20.2301 19.5586 20.4838 19.3053 20.66 19.0001C21.5814 17.404 22.0438 15.5844 21.9962 13.7421C21.9485 11.8998 21.3927 10.1064 20.39 8.56012L20.38 8.57012Z"
        class="primary-color"
      />
      <path
        d="M10.59 15.4099C10.7757 15.5959 10.9963 15.7434 11.2391 15.844C11.4819 15.9447 11.7422 15.9965 12.005 15.9965C12.2678 15.9965 12.5281 15.9447 12.7709 15.844C13.0137 15.7434 13.2342 15.5959 13.42 15.4099L19.08 6.91992L10.59 12.5799C10.404 12.7657 10.2565 12.9862 10.1559 13.229C10.0552 13.4718 10.0034 13.7321 10.0034 13.9949C10.0034 14.2578 10.0552 14.518 10.1559 14.7608C10.2565 15.0036 10.404 15.2242 10.59 15.4099Z"
        class="primary-color"
      />
    </template>

    <path
      v-else-if="icon == 'themes'"
      d="M20 4V16H8V4H20ZM20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM11.5 11.67L13.19 13.93L15.67 10.83L19 15H9L11.5 11.67ZM2 6V20C2 21.1 2.9 22 4 22H18V20H4V6H2Z"
      class="primary-color"
    />

    <path
      v-else-if="icon == 'feedback'"
      d="M18 13H17.32L15.32 15H17.23L19 17H5L6.78 15H8.83L6.83 13H6L3 16V20C3 21.1 3.89 22 4.99 22H19C20.1 22 21 21.11 21 20V16L18 13ZM17 7.95004L12.05 12.9L8.51 9.36004L13.46 4.41004L17 7.95004ZM12.76 2.29004L6.39 8.66004C6 9.05004 6 9.68004 6.39 10.07L11.34 15.02C11.73 15.41 12.36 15.41 12.75 15.02L19.11 8.66004C19.5 8.27004 19.5 7.64004 19.11 7.25004L14.16 2.30004C13.78 1.90004 13.15 1.90004 12.76 2.29004Z"
      class="primary-color"
    />

    <path
      v-else-if="icon == 'integrations'"
      d="M4 6H2V20C2 21.1 2.9 22 4 22H18V20H4V6ZM20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H8V4H20V16ZM13 14H15V11H18V9H15V6H13V9H10V11H13V14Z"
      class="primary-color"
    />

    <path
      v-else
      d="M15 4V11H5.17L4 12.17V4H15ZM16 2H3C2.45 2 2 2.45 2 3V17L6 13H16C16.55 13 17 12.55 17 12V3C17 2.45 16.55 2 16 2ZM21 6H19V15H6V17C6 17.55 6.45 18 7 18H18L22 22V7C22 6.45 21.55 6 21 6Z"
      class="primary-color"
    />
  </svg>
</template>

<script lang="ts">
export default {
  props: {
    icon: { type: String, default: "" },
  },
}
</script>

<style lang="less">
.nav-icon-wrap {
  .primary-color {
    fill: currentColor;
  }
  &:hover .primary-color {
    fill: var(--color-primary);
  }
}
</style>
