<template>
  <div>
    <svg
      v-if="icon === 'arrows'"
      width="19"
      height="8"
      viewBox="0 0 19 8"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M14.4979 1.64529C14.2376 1.38494 14.2376 0.962827 14.4979 0.702477C14.7583 0.442128 15.1804 0.442127 15.4408 0.702477L18.2692 3.5309C18.5295 3.79125 18.5295 4.21336 18.2692 4.47371L15.4408 7.30214C15.1804 7.56249 14.7583 7.56249 14.4979 7.30214C14.2376 7.04179 14.2376 6.61968 14.4979 6.35933L16.1883 4.66898H11.1981C10.8299 4.66898 10.5315 4.3705 10.5315 4.00231C10.5315 3.63412 10.8299 3.33564 11.1981 3.33564L16.1883 3.33564L14.4979 1.64529ZM7.42688 3.33564C7.79507 3.33564 8.09355 3.63412 8.09355 4.00231C8.09355 4.3705 7.79507 4.66898 7.42688 4.66898H2.4367L4.12705 6.35933C4.3874 6.61968 4.3874 7.04179 4.12705 7.30214C3.8667 7.56249 3.44459 7.56249 3.18424 7.30214L0.355815 4.47371C0.0954656 4.21336 0.0954652 3.79125 0.355815 3.5309L3.18424 0.702477C3.44459 0.442127 3.8667 0.442128 4.12705 0.702477C4.3874 0.962827 4.3874 1.38494 4.12705 1.64529L2.4367 3.33564L7.42688 3.33564Z"
        fill="white"
      />
    </svg>

    <svg
      v-if="icon === 'grid'"
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M0.332031 0.998698C0.332031 0.630508 0.630508 0.332031 0.998698 0.332031H5.66536C6.03355 0.332031 6.33203 0.630508 6.33203 0.998698V5.66536C6.33203 6.03355 6.03355 6.33203 5.66536 6.33203H0.998698C0.630508 6.33203 0.332031 6.03355 0.332031 5.66536V0.998698ZM1.66536 1.66536V4.9987H4.9987V1.66536H1.66536ZM7.66536 0.998698C7.66536 0.630508 7.96384 0.332031 8.33203 0.332031H12.9987C13.3669 0.332031 13.6654 0.630508 13.6654 0.998698V5.66536C13.6654 6.03355 13.3669 6.33203 12.9987 6.33203H8.33203C7.96384 6.33203 7.66536 6.03355 7.66536 5.66536V0.998698ZM8.9987 1.66536V4.9987H12.332V1.66536H8.9987ZM0.332031 8.33203C0.332031 7.96384 0.630508 7.66536 0.998698 7.66536H5.66536C6.03355 7.66536 6.33203 7.96384 6.33203 8.33203V12.9987C6.33203 13.3669 6.03355 13.6654 5.66536 13.6654H0.998698C0.630508 13.6654 0.332031 13.3669 0.332031 12.9987V8.33203ZM1.66536 8.9987V12.332H4.9987V8.9987H1.66536ZM7.66536 8.33203C7.66536 7.96384 7.96384 7.66536 8.33203 7.66536H12.9987C13.3669 7.66536 13.6654 7.96384 13.6654 8.33203V12.9987C13.6654 13.3669 13.3669 13.6654 12.9987 13.6654H8.33203C7.96384 13.6654 7.66536 13.3669 7.66536 12.9987V8.33203ZM8.9987 8.9987V12.332H12.332V8.9987H8.9987Z"
        fill="white"
      />
    </svg>
    <svg
      width="6"
      height="10"
      viewBox="0 0 6 10"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1.5 3.94922C1.30222 3.94922 1.10888 4.00787 0.94443 4.11775C0.779981 4.22763 0.651809 4.38381 0.576121 4.56654C0.500433 4.74926 0.48063 4.95033 0.519215 5.14431C0.5578 5.33829 0.653041 5.51647 0.792894 5.65633C0.932746 5.79618 1.11093 5.89142 1.30491 5.93C1.49889 5.96859 1.69996 5.94879 1.88268 5.8731C2.06541 5.79741 2.22159 5.66924 2.33147 5.50479C2.44135 5.34034 2.5 5.147 2.5 4.94922C2.5 4.684 2.39464 4.42965 2.20711 4.24211C2.01957 4.05458 1.76522 3.94922 1.5 3.94922ZM1.5 7.44922C1.30222 7.44922 1.10888 7.50787 0.94443 7.61775C0.779981 7.72763 0.651809 7.88381 0.576121 8.06654C0.500433 8.24926 0.48063 8.45033 0.519215 8.64431C0.5578 8.83829 0.653041 9.01647 0.792894 9.15633C0.932746 9.29618 1.11093 9.39142 1.30491 9.43C1.49889 9.46859 1.69996 9.44879 1.88268 9.3731C2.06541 9.29741 2.22159 9.16924 2.33147 9.00479C2.44135 8.84034 2.5 8.647 2.5 8.44922C2.5 8.184 2.39464 7.92965 2.20711 7.74211C2.01957 7.55458 1.76522 7.44922 1.5 7.44922ZM5 2.44922C5.19778 2.44922 5.39112 2.39057 5.55557 2.28069C5.72002 2.17081 5.84819 2.01463 5.92388 1.8319C5.99957 1.64918 6.01937 1.44811 5.98079 1.25413C5.9422 1.06015 5.84696 0.881965 5.70711 0.742112C5.56725 0.60226 5.38907 0.507019 5.19509 0.468434C5.00111 0.429849 4.80004 0.449652 4.61732 0.52534C4.43459 0.601027 4.27841 0.7292 4.16853 0.893649C4.05865 1.0581 4 1.25144 4 1.44922C4 1.71444 4.10536 1.96879 4.29289 2.15633C4.48043 2.34386 4.73478 2.44922 5 2.44922ZM1.5 0.449219C1.30222 0.449219 1.10888 0.507868 0.94443 0.61775C0.779981 0.727631 0.651809 0.88381 0.576121 1.06654C0.500433 1.24926 0.48063 1.45033 0.519215 1.64431C0.5578 1.83829 0.653041 2.01647 0.792894 2.15633C0.932746 2.29618 1.11093 2.39142 1.30491 2.43C1.49889 2.46859 1.69996 2.44879 1.88268 2.3731C2.06541 2.29741 2.22159 2.16924 2.33147 2.00479C2.44135 1.84034 2.5 1.647 2.5 1.44922C2.5 1.184 2.39464 0.929649 2.20711 0.742112C2.01957 0.554576 1.76522 0.449219 1.5 0.449219ZM5 7.44922C4.80222 7.44922 4.60888 7.50787 4.44443 7.61775C4.27998 7.72763 4.15181 7.88381 4.07612 8.06654C4.00043 8.24926 3.98063 8.45033 4.01922 8.64431C4.0578 8.83829 4.15304 9.01647 4.29289 9.15633C4.43275 9.29618 4.61093 9.39142 4.80491 9.43C4.99889 9.46859 5.19996 9.44879 5.38268 9.3731C5.56541 9.29741 5.72159 9.16924 5.83147 9.00479C5.94135 8.84034 6 8.647 6 8.44922C6 8.184 5.89464 7.92965 5.70711 7.74211C5.51957 7.55458 5.26522 7.44922 5 7.44922ZM5 3.94922C4.80222 3.94922 4.60888 4.00787 4.44443 4.11775C4.27998 4.22763 4.15181 4.38381 4.07612 4.56654C4.00043 4.74926 3.98063 4.95033 4.01922 5.14431C4.0578 5.33829 4.15304 5.51647 4.29289 5.65633C4.43275 5.79618 4.61093 5.89142 4.80491 5.93C4.99889 5.96859 5.19996 5.94879 5.38268 5.8731C5.56541 5.79741 5.72159 5.66924 5.83147 5.50479C5.94135 5.34034 6 5.147 6 4.94922C6 4.684 5.89464 4.42965 5.70711 4.24211C5.51957 4.05458 5.26522 3.94922 5 3.94922Z"
        fill="white"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: "ActionIcon",
  props: {
    icon: {
      type: String,
      default: null,
      required: false,
    },
  },
};
</script>
