<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M8.423 2.122a.5.5 0 0 1 .705.05c.337.39.397.858.364 1.273-.031.395-.151.812-.254 1.168l-.008.026c-.112.387-.203.71-.225.994-.022.272.027.43.123.54a.5.5 0 0 1-.756.654c-.337-.39-.397-.857-.364-1.273.031-.394.151-.81.254-1.167l.008-.026c.112-.388.203-.71.225-.994.021-.272-.027-.43-.123-.54a.5.5 0 0 1 .05-.705M6 11a1 1 0 0 0-1 1v7a1 1 0 1 0 2 0v-7a1 1 0 0 0-1-1m0-2a3 3 0 0 0-3 3v7a3 3 0 0 0 5 2.236c.53.475 1.232.764 2 .764s1.47-.289 2-.764c.53.475 1.232.764 2 .764s1.47-.289 2-.764A3 3 0 0 0 21 19v-3.268a2 2 0 0 0 0-3.464V12a3 3 0 0 0-5-2.236C15.47 9.289 14.768 9 14 9s-1.47.289-2 .764A3 3 0 0 0 10 9c-.768 0-1.47.289-2 .764A3 3 0 0 0 6 9m13 3.268V12a1 1 0 1 0-2 0v7a1 1 0 1 0 2 0v-3.268a2 2 0 0 1 0-3.464M15 12v7a1 1 0 1 1-2 0v-7a1 1 0 1 1 2 0m-4 0a1 1 0 1 0-2 0v7a1 1 0 1 0 2 0zm1.628-9.827a.5.5 0 0 0-.756.654c.096.11.145.268.123.54-.022.283-.113.606-.225.994l-.008.026c-.103.356-.223.773-.254 1.168-.033.415.027.883.364 1.272a.5.5 0 0 0 .756-.654c-.095-.11-.144-.268-.123-.54.022-.283.113-.607.225-.994l.008-.026c.103-.356.223-.773.254-1.168.033-.415-.026-.883-.364-1.272m2.795-.051a.5.5 0 0 1 .705.05c.338.39.397.858.364 1.273-.031.395-.151.812-.254 1.168l-.008.026c-.112.387-.203.71-.225.994-.021.272.028.43.123.54a.5.5 0 1 1-.756.654c-.337-.39-.397-.857-.364-1.273.031-.394.151-.81.254-1.167l.008-.026c.112-.388.203-.71.225-.994.022-.272-.027-.43-.123-.54a.5.5 0 0 1 .05-.705M19 14a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/></svg></template>
<script setup lang="ts">
/**
 * Heater24 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>
