<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><g clip-path="url(#media_dimension-diameter_24__a)"><path d="M19.98 11.44a1 1 0 0 1 1.996-.137 10 10 0 0 1 .018 1.045 1 1 0 1 1-1.998-.067 8 8 0 0 0-.015-.84Zm-.877 6.178a1 1 0 0 1-.317-1.38q.221-.354.406-.73a1 1 0 0 1 1.797.878q-.232.472-.508.914a1 1 0 0 1-1.378.317Zm-.469-10.091a1 1 0 0 1 1.656-1.12 10 10 0 0 1 .54.896 1.001 1.001 0 0 1-1.764.941 8 8 0 0 0-.432-.717m-3.29 12.891a1 1 0 0 1 .412-1.352q.37-.198.717-.432a1 1 0 0 1 1.12 1.656 10 10 0 0 1-.896.54 1 1 0 0 1-1.353-.412m.163-15.61a1 1 0 0 1 .88-1.797q.47.231.913.509a1 1 0 1 1-1.061 1.694 8 8 0 0 0-.732-.406M7 12a1 1 0 1 1 2 0v1.586L13.586 9H12a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-1.586L10.415 15H12a1 1 0 0 1 0 2H8a1 1 0 0 1-1-1zm3.687 8.961a1 1 0 0 1 1.033-.966 8 8 0 0 0 .839-.014 1 1 0 0 1 .138 1.995 10 10 0 0 1-1.045.018 1 1 0 0 1-.965-1.033m-.313-17.87a1 1 0 0 1 .93-1.066 10 10 0 0 1 1.044-.019 1 1 0 0 1-.067 1.998 8 8 0 0 0-.84.015 1 1 0 0 1-1.067-.929ZM6.7 20.48a1 1 0 0 1 1.061-1.696q.355.222.733.407a1.001 1.001 0 0 1-.88 1.797q-.472-.232-.914-.508M6.138 5.097a1 1 0 0 1 .27-1.388q.432-.292.895-.54a1 1 0 0 1 .942 1.766 8 8 0 0 0-.718.432 1 1 0 0 1-1.389-.27m-2.969 11.6a1 1 0 0 1 1.766-.94 8 8 0 0 0 .432.716 1 1 0 0 1-1.658 1.12 10 10 0 0 1-.54-.896m.301-7.745a1 1 0 0 1-.459-1.337q.231-.473.509-.915a.999.999 0 1 1 1.694 1.06 8 8 0 0 0-.406.732 1 1 0 0 1-1.338.46m-1.464 2.7a1 1 0 0 1 1.998.068 8 8 0 0 0 .015.839 1 1 0 0 1-1.994.138 10 10 0 0 1-.019-1.045"/></g><defs><clipPath id="media_dimension-diameter_24__a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg></template>
<script setup lang="ts">
/**
 * DimensionDiameter24 is an SVG icon wrapped in a Vue component to make it easier to use.
 */
withDefaults(
  defineProps<{
    /**
     * Define the color of the icon.
     */
    color?: string;
  }>(),
  {
    color: 'currentColor',
  },
);
</script>
