<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="M12.353 2.854a.5.5 0 1 0-.707-.708c-.468.469-.636.964-.563 1.472.06.43.294.818.467 1.105l.02.034c.201.335.326.558.356.767.021.148.002.34-.28.622a.5.5 0 0 0 .707.708c.468-.469.636-.964.563-1.472-.061-.43-.295-.818-.467-1.105l-.02-.034c-.202-.335-.327-.558-.357-.767-.02-.148 0-.34.28-.622M13 8.978a.7.7 0 0 0 .065.141c.078.139.208.318.402.549.237.28.495.554.786.863.224.239.469.498.74.8 1.125 1.25 2.507 3.004 2.507 5.169a5.5 5.5 0 1 1-11 0c0-2.165 1.382-3.92 2.507-5.169.271-.302.516-.561.74-.8.291-.31.548-.582.785-.863.195-.231.325-.41.403-.549A.7.7 0 0 0 11 8.978a1 1 0 0 1 2 0m.507 3.691c1.125 1.25 1.993 2.496 1.993 3.831a3.5 3.5 0 1 1-7 0c0-1.335.868-2.58 1.993-3.831.2-.222.422-.46.645-.696.308-.33.616-.658.862-.944.246.286.554.615.862.943.222.238.445.475.645.697M9.353 4.146a.5.5 0 0 1 0 .708c-.141.14-.15.237-.138.334.018.149.097.319.232.588l.015.03c.114.228.273.545.315.882.05.404-.065.807-.424 1.166a.5.5 0 1 1-.707-.708c.141-.14.15-.238.139-.334-.019-.149-.098-.319-.233-.588l-.014-.03c-.115-.228-.274-.545-.316-.882-.05-.403.065-.807.424-1.166a.5.5 0 0 1 .707 0m6.29.708a.5.5 0 1 0-.708-.708c-.359.36-.474.763-.424 1.166.042.337.201.654.316.882l.014.03c.135.27.214.44.233.588.012.096.002.193-.139.334a.5.5 0 1 0 .707.708c.359-.36.474-.762.424-1.166-.042-.337-.2-.654-.315-.882l-.015-.03c-.135-.27-.214-.44-.232-.588-.013-.097-.003-.193.138-.334"/></svg></template>
<script setup lang="ts">
/**
 * HotWater24 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>
