<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    :viewBox="`0 0 ${box} ${box}`"
    :width="width"
    :height="height"
    xml:space="preserve"
  >
    <g>
      <path d="M48,0A48,48,0,1,0,96,48,48.0512,48.0512,0,0,0,48,0Zm0,84A36,36,0,1,1,84,48,36.0393,36.0393,0,0,1,48,84Z"/>
      <path d="M60,42H36a6,6,0,0,0,0,12H60a6,6,0,0,0,0-12Z"/>
    </g>
  </svg>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{ box?: number; width?: number | string; height?: number | string }>(), {
  box: 120,
  width: 20,
  height: 20,
});
const { box, width, height } = props;
</script>

<style scoped>

</style>