<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="M9 4a1 1 0 0 0-1 1v1.07A8 8 0 0 0 4 13v1.23a2.67 2.67 0 0 0-2 2.58c0 1.133.74 2.203 1.942 2.46 1.446.31 4.132.73 8.058.73s6.612-.42 8.058-.73C21.26 19.013 22 17.943 22 16.81a2.67 2.67 0 0 0-2-2.58V13a8 8 0 0 0-4-6.93V5a1 1 0 0 0-1-1zm1 2.651V11a1 1 0 1 1-2 0V8.528A5.99 5.99 0 0 0 6 13v3.243l-1.076-.081-.198-.016A.67.67 0 0 0 4 16.81c0 .288.173.465.36.505C5.673 17.595 8.219 18 12 18s6.328-.405 7.64-.685c.187-.04.36-.218.36-.506a.67.67 0 0 0-.726-.663l-.198.015-1.076.082V13a5.99 5.99 0 0 0-2-4.472V11a1 1 0 1 1-2 0V6h-4zm-1.958 8.81a.5.5 0 1 0-.084.996c1.153.098 2.5.163 4.042.163s2.89-.065 4.042-.163a.5.5 0 1 0-.084-.997c-1.125.096-2.444.16-3.958.16s-2.833-.064-3.958-.16"/></svg></template>
<script setup lang="ts">
/**
 * HardHat24 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>
