ArrowForwardIcon.vue

<script setup lang="ts">
interface Props {
  color?: string;
  size?: string | number;
}
defineProps<Props>();
</script>

<template>
  <svg
    :width="`${size ?? 40}px`"
    :height="`${size ?? 40}px`"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M17.6 3.80353C16.4468 2.26658 14 3.08182 14 5.00302V8.00929C9.32281 7.86093 6.22286 9.50672 4.22042 11.7657C2.13865 14.1142 1.33668 17.0185 1.02193 18.9028C0.884035 19.7283 1.41941 20.3237 1.98513 20.5275C2.52889 20.7234 3.25333 20.6283 3.72507 20.0531C5.30555 18.1261 8.5 15.4884 14 15.4884V18.997C14 20.9182 16.4468 21.7334 17.6 20.1965L22.4 13.7992C23.2 12.733 23.2 11.267 22.4 10.2008L17.6 3.80353ZM16 5.00302L20.8 11.4003C21.0667 11.7557 21.0667 12.2443 20.8 12.5997L16 18.997V14.5C16 13.9477 15.5523 13.5 15 13.5H14C7 13.5 3.39908 17.4621 3.39908 17.4621C3.81724 16.0361 4.52506 14.4371 5.71707 13.0924C7.28166 11.3273 9.5 10 14 10H15C15.5523 10 16 9.55228 16 9V5.00302Z"
      :fill="color ?? '#000000'"
    />
  </svg>
</template>

<style scoped></style>