GiftIcon.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="M5.12702 6C4.97689 5.41856 4.95943 4.81002 5.07686 4.21964C5.20519 3.57448 5.49065 2.97092 5.90796 2.46243C6.32527 1.95394 6.86154 1.55621 7.46927 1.30448C8.077 1.05275 8.73743 0.954786 9.39207 1.01926C10.0467 1.08374 10.6753 1.30867 11.2223 1.67412C11.5109 1.86698 11.7721 2.09584 12 2.35425C12.2125 2.11335 12.4539 1.89804 12.7197 1.7136C13.2506 1.34528 13.8627 1.11103 14.5038 1.03089C15.145 0.95075 15.7959 1.0271 16.4011 1.25342C17.0063 1.47973 17.5476 1.84928 17.9788 2.33043C18.41 2.81159 18.7183 3.39004 18.8772 4.0163C19.0361 4.64256 19.0409 5.29799 18.8912 5.92652C18.8854 5.95109 18.8793 5.97558 18.873 6H19C20.6569 6 22 7.34315 22 9V10C22 11.3062 21.1652 12.4175 20 12.8293V20C20 21.6569 18.6569 23 17 23H7C5.34315 23 4 21.6569 4 20V12.8293C2.83481 12.4175 2 11.3062 2 10V9C2 7.34315 3.34315 6 5 6H5.12702ZM10.7528 4.06311C10.9068 4.3512 10.9999 4.6728 11 4.99947V6H7.28241C7.20504 5.86711 7.14307 5.7252 7.09809 5.57694C7.00322 5.26417 6.98694 4.93283 7.0507 4.61226C7.11447 4.2917 7.2563 3.99181 7.46365 3.73915C7.671 3.4865 7.93746 3.28888 8.23942 3.1638C8.54139 3.03872 8.86954 2.99005 9.19481 3.02208C9.52008 3.05412 9.83243 3.16588 10.1042 3.34747C10.376 3.52905 10.5987 3.77485 10.7528 4.06311ZM13 21H17C17.5523 21 18 20.5523 18 20V13H13V21ZM11 13V21H7C6.44772 21 6 20.5523 6 20V13H11ZM13 11H19C19.5523 11 20 10.5523 20 10V9C20 8.44772 19.5523 8 19 8H13V11ZM11 8V11H5C4.44772 11 4 10.5523 4 10V9C4 8.44772 4.44772 8 5 8H11ZM13 6H16.7176C16.8153 5.83225 16.8882 5.65051 16.9334 5.46036C17.0078 5.14806 17.0054 4.8224 16.9265 4.51123C16.8475 4.20006 16.6944 3.91264 16.4801 3.67357C16.2658 3.43449 15.9969 3.25088 15.6962 3.13843C15.3955 3.02598 15.072 2.98804 14.7535 3.02786C14.4349 3.06768 14.1308 3.18407 13.867 3.36708C13.6032 3.55009 13.3877 3.79427 13.2389 4.07873C13.0903 4.3629 13.0001 4.6793 13 5V6Z"
      :fill="color ?? '#000000'"
    />
  </svg>
</template>

<style scoped></style>