<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.5 4a4 4 0 0 0-4 4v7h1a.5.5 0 0 1 .5.5v.793l1.646-1.647a.5.5 0 0 1 .708.708L11.207 16.5H12.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H10v1a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5h1V8a6 6 0 1 1 12 0 1 1 0 1 1-2 0 4 4 0 0 0-4-4m-3 13.5H12v2H9.5a.5.5 0 0 0-.5.5v1H6v-5h3v1a.5.5 0 0 0 .5.5m7.75-6.5.372-.334a.5.5 0 0 0-.744 0zm0 0 .372-.334.002.002.004.004.014.016a10 10 0 0 1 .227.267c.146.176.34.42.537.692.195.271.398.58.554.884.148.288.29.637.29.969a2 2 0 0 1-4 0c0-.332.142-.681.29-.969.156-.304.36-.613.554-.884a13 13 0 0 1 .714-.901l.05-.058.014-.016.004-.004.001-.001zm-.344 1.231c.119-.165.238-.32.344-.453.106.134.225.288.344.453.18.25.352.515.477.758.133.258.179.429.179.511a1 1 0 1 1-2 0c0-.082.046-.253.179-.511.125-.243.297-.507.477-.758"/></svg></template>
<script setup lang="ts">
/**
 * Faucet24 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>
