BulbIcon.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="M12 1C8.20602 1 6.15147 3.02886 5.1033 5.03734C4.591 6.01899 4.31823 6.98949 4.17245 7.70719C4.09911 8.06826 4.05672 8.3713 4.03245 8.58786C4.01718 8.72417 4 8.86266 4 9C4 11.7224 5.23215 13.3137 6.29447 14.1534C6.82295 14.5712 7.11709 14.999 7.16406 15.3747L7.78873 20.3721C7.97639 21.8734 9.25259 23 10.7656 23H13.2344C14.7474 23 16.0236 21.8734 16.2113 20.3721L16.8359 15.3747C16.8829 14.999 17.177 14.5712 17.7055 14.1534C18.7678 13.3137 20 11.7224 20 9C20 8.86266 19.9828 8.72417 19.9675 8.58786C19.9433 8.3713 19.9009 8.06826 19.8275 7.70719C19.6818 6.98949 19.409 6.01899 18.8967 5.03734C17.8485 3.02886 15.794 1 12 1ZM7.53474 12.5845C6.43811 11.7176 5.86517 10.1925 6.02001 8.81057C6.03864 8.64432 6.07247 8.40049 6.13243 8.10531C6.25324 7.51051 6.47539 6.73101 6.87637 5.96266C7.65476 4.47114 9.10021 3 12 3C14.8998 3 16.3452 4.47114 17.1236 5.96266C17.5246 6.73101 17.7468 7.51051 17.8676 8.10531C17.9275 8.40049 17.9614 8.64432 17.98 8.81057C18.1348 10.1925 17.5619 11.7176 16.4653 12.5845C15.7853 13.1219 14.9955 13.974 14.8514 15.1267L14.6172 17H9.38278L9.14862 15.1267C9.00453 13.974 8.21469 13.1219 7.53474 12.5845ZM9.63278 19L9.77329 20.124C9.83584 20.6245 10.2612 21 10.7656 21H13.2344C13.7388 21 14.1642 20.6245 14.2267 20.124L14.3672 19H9.63278Z"
      :fill="color ?? '#000000'"
    />
  </svg>
</template>

<style scoped></style>