import React, { ForwardedRef, useContext } from 'react';
import { OriginIconProps } from '../type';
import { Context } from '../context';

function IconMultiTimbreComponent(props: OriginIconProps, ref: ForwardedRef<SVGSVGElement>) {
    const { prefix: prefixFromContext } = useContext(Context);
    const { className = '', prefix: prefixFromProps, width = '1em', height = '1em', useCurrentColor = true, spin, ...rest } = props;

    const prefix = prefixFromProps || prefixFromContext || 'hiagent';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-multi-timbre${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 22 22" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M4.59961 14.5C4.87575 14.5 5.09961 14.7239 5.09961 15V15.5C5.09964 16.2732 5.72682 16.9004 6.5 16.9004H15.5C16.2732 16.9004 16.9004 16.2732 16.9004 15.5V15C16.9004 14.7239 17.1242 14.5 17.4004 14.5H18.0996C18.3758 14.5 18.5996 14.7239 18.5996 15V15.5C18.5996 17.2121 17.2121 18.5996 15.5 18.5996H6.5C4.78794 18.5996 3.40042 17.2121 3.40039 15.5V15C3.40039 14.7239 3.62425 14.5 3.90039 14.5H4.59961ZM11.2998 7.625C11.5759 7.625 11.7998 7.84886 11.7998 8.125V13.875C11.7998 14.1511 11.5759 14.375 11.2998 14.375H10.7002C10.4241 14.375 10.2002 14.1511 10.2002 13.875V8.125C10.2002 7.84886 10.4241 7.625 10.7002 7.625H11.2998ZM8.2998 8.75C8.57595 8.75 8.7998 8.97386 8.7998 9.25V12.75C8.7998 13.0261 8.57595 13.25 8.2998 13.25H7.7002C7.42405 13.25 7.2002 13.0261 7.2002 12.75V9.25C7.2002 8.97386 7.42405 8.75 7.7002 8.75H8.2998ZM14.2998 8.75C14.5759 8.75 14.7998 8.97386 14.7998 9.25V12.75C14.7998 13.0261 14.5759 13.25 14.2998 13.25H13.7002C13.4241 13.25 13.2002 13.0261 13.2002 12.75V9.25C13.2002 8.97386 13.4241 8.75 13.7002 8.75H14.2998ZM5.2998 9.5C5.57589 9.50007 5.7998 9.7239 5.7998 10V12C5.7998 12.2761 5.57589 12.4999 5.2998 12.5H4.7002C4.42405 12.5 4.2002 12.2761 4.2002 12V10C4.2002 9.72386 4.42405 9.5 4.7002 9.5H5.2998ZM17.2998 9.5C17.5759 9.5 17.7998 9.72386 17.7998 10V12C17.7998 12.2761 17.5759 12.5 17.2998 12.5H16.7002C16.4241 12.4999 16.2002 12.2761 16.2002 12V10C16.2002 9.7239 16.4241 9.50007 16.7002 9.5H17.2998ZM15.5 3.40039C17.2121 3.40039 18.5996 4.78791 18.5996 6.5V7C18.5996 7.27614 18.3758 7.5 18.0996 7.5H17.4004C17.1242 7.5 16.9004 7.27614 16.9004 7V6.5C16.9004 5.7268 16.2732 5.09961 15.5 5.09961H6.5C5.7268 5.09961 5.09961 5.7268 5.09961 6.5V7C5.09961 7.27614 4.87575 7.5 4.59961 7.5H3.90039C3.62425 7.5 3.40039 7.27614 3.40039 7V6.5C3.40039 4.78792 4.78792 3.4004 6.5 3.40039H15.5Z"/></svg>;
}

const IconMultiTimbre = React.forwardRef(IconMultiTimbreComponent);
export default IconMultiTimbre;
