CompassIcon.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="M16.982 8.99791C17.5399 7.7427 16.2573 6.46011 15.0021 7.01799L10.0018 9.24033C9.66249 9.39115 9.39115 9.66249 9.24033 10.0018L7.01798 15.0021C6.46011 16.2573 7.74269 17.5399 8.99791 16.982L13.9982 14.7597C14.3375 14.6089 14.6089 14.3375 14.7597 13.9982L16.982 8.99791ZM10.9898 10.9898L14.6264 9.37359L13.0102 13.0102L9.37359 14.6264L10.9898 10.9898Z"
      :fill="color ?? '#000000'"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 20.9869C7.03665 20.9869 3.01306 16.9633 3.01306 12C3.01306 7.03665 7.03665 3.01306 12 3.01306C16.9633 3.01306 20.9869 7.03665 20.9869 12C20.9869 16.9633 16.9633 20.9869 12 20.9869Z"
      :fill="color ?? '#000000'"
    />
  </svg>
</template>

<style scoped></style>