<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="M22.5 6A1.5 1.5 0 0 1 24 4.5c10.77 0 19.5 8.73 19.5 19.5a19.45 19.45 0 0 1-6.461 14.5H42a1.5 1.5 0 0 1 0 3h-8a1.5 1.5 0 0 1-1.5-1.5v-8a1.5 1.5 0 0 1 3 0v3.832c3.086-2.999 5-7.192 5-11.832 0-9.113-7.387-16.5-16.5-16.5A1.5 1.5 0 0 1 22.5 6M6 9.5h4.962A19.45 19.45 0 0 0 4.5 24c0 10.77 8.73 19.5 19.5 19.5a1.5 1.5 0 0 0 0-3c-9.113 0-16.5-7.387-16.5-16.5 0-4.64 1.914-8.833 5-11.832V16a1.5 1.5 0 0 0 3 0V8A1.5 1.5 0 0 0 14 6.5H6a1.5 1.5 0 1 0 0 3M20 16a4 4 0 0 1 8 0v7.528a6 6 0 1 1-8 0zm4-2a2 2 0 0 0-2 2v8.5l-.4.3a4 4 0 1 0 4.8 0l-.4-.3V16a2 2 0 0 0-2-2m-1 11.17a3.001 3.001 0 1 0 2 0V20h-2z"/></svg></template>
<script setup lang="ts">
/**
 * Thermostat48 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>
