<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M24 4.5A1.5 1.5 0 0 1 25.5 6v3a1.5 1.5 0 0 1-3 0V6A1.5 1.5 0 0 1 24 4.5m0 33a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-3 0v-3a1.5 1.5 0 0 1 1.5-1.5m-18-15a1.5 1.5 0 0 0 0 3h3a1.5 1.5 0 0 0 0-3zM37.5 24a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 1-1.5-1.5M10.213 35.666a1.5 1.5 0 1 0 2.121 2.121l2.121-2.121a1.5 1.5 0 1 0-2.12-2.121zm23.332-21.21a1.5 1.5 0 0 1 0-2.122l2.121-2.121a1.5 1.5 0 1 1 2.121 2.12l-2.12 2.122a1.5 1.5 0 0 1-2.122 0m-21.21-4.245a1.5 1.5 0 0 0-2.122 2.121l2.121 2.122a1.5 1.5 0 1 0 2.121-2.122zm21.214 23.334a1.5 1.5 0 0 1 2.121 0l2.121 2.121a1.5 1.5 0 0 1-2.121 2.121l-2.121-2.12a1.5 1.5 0 0 1 0-2.122M24 30.5v-13a6.5 6.5 0 1 1 0 13M14.5 24a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0"/></svg></template>
<script setup lang="ts">
/**
 * Brightness48 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>
