DotsHorizontalIcon.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
      d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM2.97192 12C2.97192 12.5678 3.43221 13.0281 4 13.0281C4.56779 13.0281 5.02808 12.5678 5.02808 12C5.02808 11.4322 4.56779 10.9719 4 10.9719C3.43221 10.9719 2.97192 11.4322 2.97192 12Z"
      :fill="color ?? '#000000'"
    />
    <path
      d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM10.9719 12C10.9719 12.5678 11.4322 13.0281 12 13.0281C12.5678 13.0281 13.0281 12.5678 13.0281 12C13.0281 11.4322 12.5678 10.9719 12 10.9719C11.4322 10.9719 10.9719 11.4322 10.9719 12Z"
      :fill="color ?? '#000000'"
    />
    <path
      d="M23 12C23 13.6569 21.6569 15 20 15C18.3431 15 17 13.6569 17 12C17 10.3431 18.3431 9 20 9C21.6569 9 23 10.3431 23 12ZM18.9719 12C18.9719 12.5678 19.4322 13.0281 20 13.0281C20.5678 13.0281 21.0281 12.5678 21.0281 12C21.0281 11.4322 20.5678 10.9719 20 10.9719C19.4322 10.9719 18.9719 11.4322 18.9719 12Z"
      :fill="color ?? '#000000'"
    />
  </svg>
</template>

<style scoped></style>