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

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

    const prefix = prefixFromProps || prefixFromContext || 'hiagent';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-loudVolume${loadingKls} ${className}`} width={width} height={height} xmlns="http://www.w3.org/2000/svg" fill={useCurrentColor ? 'currentColor' : 'none'} viewBox="0 0 20 20" {...rest} ref={ref}><path fill={useCurrentColor ? 'currentColor' : '#fff'} d="M10.417 2.7a.634.634 0 0 1 .611.469l.02.117.002.056v13.325a.634.634 0 0 1-.586.63l-.056.003h-.54a.634.634 0 0 1-.26-.056l-.078-.042-.052-.036-4.865-3.741a.632.632 0 0 1-.244-.445l-.003-.067V7.078a.635.635 0 0 1 .206-.469l.05-.04L9.48 2.83a.633.633 0 0 1 .322-.129l.073-.002h.542Zm.706 14.41-.096.123a.83.83 0 0 0 .149-.23.749.749 0 0 1-.053.106ZM9.461 4.443 5.71 7.33l-.077.06v5.222l.077.06 4.072 3.133V4.197l-.322.247Zm6.888.416a.201.201 0 0 1 .142.059 7.275 7.275 0 0 1 2.051 4.726l.008.355a7.277 7.277 0 0 1-2.07 5.093.2.2 0 0 1-.285-.002l-.587-.586a.242.242 0 0 1 .004-.337l.002-.002a6.012 6.012 0 0 0 1.662-3.876l.007-.29a6.012 6.012 0 0 0-1.658-4.154l-.002-.002-.03-.037a.24.24 0 0 1-.001-.264l.03-.036.585-.586a.2.2 0 0 1 .142-.06ZM4.443 13.542Zm-3.07-.331Zm1.358.052ZM2.5 6.866a.217.217 0 0 1 .217.217v5.834a.218.218 0 0 1-.217.217h-.833a.218.218 0 0 1-.217-.217V7.083a.218.218 0 0 1 .217-.217H2.5Zm11.201 6.013a.389.389 0 0 0 .059.05l-.059-.05Zm.364-5.653a.192.192 0 0 1 .061.042 3.953 3.953 0 0 1 1.086 2.542l.005.19c0 1.065-.42 2.032-1.103 2.744a.19.19 0 0 1-.135.055.19.19 0 0 1-.133-.058l-.581-.582-.029-.036c-.057-.091-.051-.234.046-.346a2.69 2.69 0 0 0 .658-1.533l.01-.244c0-.568-.179-1.12-.509-1.577l-.15-.19c-.11-.127-.102-.295-.017-.38l.579-.579v.001l.004-.004a.188.188 0 0 1 .208-.045Zm.978 1.045v.001Zm-.395-.683Zm-1.572.193.001.001a.419.419 0 0 1 0-.001Zm1.132-.703ZM4.171 6.992Zm-2.664-.294Zm1.224.04Zm1.707-.275a.843.843 0 0 0-.06.061l-.055.068a.834.834 0 0 1 .054-.068l.061-.061Zm6.421-3.836.124.096a.831.831 0 0 0-.215-.142c.03.015.062.028.091.046Z"/></svg>;
}

const IconLoudVolume = React.forwardRef(IconLoudVolumeComponent);
export default IconLoudVolume;
