import { forwardRef } from "react";
import type { IconProps } from "../../types";

export const IconToolMusicOutline = forwardRef<SVGSVGElement, IconProps>(
  ({ color = "currentColor", ...props }, forwardedRef) => {
    const { className } = props;
    props = {
      ...props,
      width: `${props.width || props.size || 20}`,
      height: `${props.height || props.size || 20}`,
      className: `${
        className ? className + " " : ""
      }customeow-icon customeow-icon-icon-tool-music-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M16.5267 1.27624C16.7145 1.41797 16.825 1.63966 16.825 1.87501V4.98343C16.8253 4.99476 16.8253 5.00606 16.825 5.01732V13.5857C16.825 14.7577 16.0481 15.7877 14.9212 16.1097L13.8212 16.424C12.3823 16.8351 10.95 15.7547 10.95 14.2583C10.95 13.2526 11.6167 12.3688 12.5836 12.0925L14.5091 11.5424C14.992 11.4044 15.325 10.963 15.325 10.4607V5.9943L8.07501 8.06573V16.0857C8.07501 17.2577 7.29807 18.2877 6.17115 18.6097L5.07117 18.924C3.63231 19.3351 2.20001 18.2547 2.20001 16.7583C2.20001 15.7526 2.86667 14.8688 3.83362 14.5925L5.75907 14.0424C6.24204 13.9044 6.57501 13.463 6.57501 12.9607V7.51659C6.57475 7.50526 6.57476 7.49395 6.57501 7.48268V4.37501C6.57501 4.04015 6.797 3.74586 7.11897 3.65386L15.869 1.15386C16.0953 1.08921 16.3388 1.13452 16.5267 1.27624ZM8.07501 6.50571L15.325 4.43428V2.8693L8.07501 4.94073V6.50571ZM6.57501 15.3326C6.44637 15.3935 6.31147 15.4446 6.17115 15.4847L4.2457 16.0348C3.9227 16.1271 3.70001 16.4223 3.70001 16.7583C3.70001 17.2581 4.17845 17.619 4.65909 17.4817L5.75907 17.1674C6.24204 17.0294 6.57501 16.588 6.57501 16.0857V15.3326ZM15.325 12.8326C15.1964 12.8935 15.0615 12.9446 14.9212 12.9847L12.9957 13.5348C12.6727 13.6271 12.45 13.9223 12.45 14.2583C12.45 14.7581 12.9285 15.119 13.4091 14.9817L14.5091 14.6674C14.992 14.5294 15.325 14.088 15.325 13.5857V12.8326Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconToolMusicOutline.displayName = "IconToolMusicOutline";

export default IconToolMusicOutline;