<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="M18 8.5a1.5 1.5 0 0 0-1.5 1.5v2.432c-4.768 2.641-8 7.726-8 13.568v2.862c-2.246.397-4 2.351-4 4.757 0 2.056 1.338 3.972 3.489 4.432C10.847 38.663 16.184 39.5 24 39.5s13.153-.837 16.011-1.449c2.151-.46 3.489-2.376 3.489-4.432 0-2.406-1.754-4.36-4-4.757V26c0-5.842-3.232-10.927-8-13.568V10A1.5 1.5 0 0 0 30 8.5zm1.5 4.814V22a1.5 1.5 0 0 1-3 0v-6.001a12.48 12.48 0 0 0-5 10v5.948l-1.614-.123-.395-.03A1.843 1.843 0 0 0 7.5 33.62c0 .787.487 1.364 1.117 1.499C11.273 35.687 16.4 36.5 24 36.5s12.727-.813 15.383-1.382c.63-.135 1.117-.712 1.117-1.5a1.843 1.843 0 0 0-1.99-1.824l-.396.03-1.614.123V26c0-4.088-1.962-7.72-5-10.001V22a1.5 1.5 0 0 1-3 0V11.5h-9zM16.085 30.92a1 1 0 1 0-.17 1.992c2.306.196 5 .327 8.085.327 3.084 0 5.779-.13 8.085-.327a1 1 0 1 0-.17-1.992c-2.25.19-4.888.319-7.915.319s-5.666-.128-7.915-.32"/></svg></template>
<script setup lang="ts">
/**
 * HardHat48 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>
