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

function IconVolumeComponent(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-volume${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 48 48" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path fillRule="evenodd" clipRule="evenodd" d="M23.68 6H25a2 2 0 011.994 1.85L27 8v32a2 2 0 01-1.85 1.995L25 42h-1.32c-.378 0-.747-.107-1.065-.307l-.154-.108-11.68-8.985a1.996 1.996 0 01-.774-1.417L10 31.015v-14.03c0-.564.238-1.1.652-1.477l.129-.108 11.68-8.985c.3-.23.657-.37 1.03-.406L23.68 6H25h-1.32zM23 11.047l-9 6.923v12.06l9 6.923V11.047zm16.921.421A17.94 17.94 0 0145 24c0 4.886-1.947 9.318-5.108 12.562-.374.384-.988.37-1.367-.01l-1.408-1.407c-.405-.405-.385-1.065.01-1.479A13.948 13.948 0 0041 24c0-3.736-1.463-7.13-3.848-9.64-.393-.415-.412-1.072-.008-1.476l1.408-1.408a.96.96 0 011.369-.008zM6 16a1 1 0 011 1v14a1 1 0 01-1 1H4a1 1 0 01-1-1V17a1 1 0 011-1h2zm28.243 1.105A9.968 9.968 0 0137 24a9.967 9.967 0 01-2.787 6.926c-.363.378-.961.353-1.332-.017l-1.385-1.386c-.424-.424-.375-1.121.02-1.573A5.975 5.975 0 0033 24a5.978 5.978 0 00-1.463-3.926c-.391-.452-.438-1.146-.016-1.568l1.387-1.386c.372-.372.972-.396 1.335-.015z"/></svg>;
}

const IconVolume = React.forwardRef(IconVolumeComponent);
export default IconVolume;
