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

function IconMusicSmallColorComponent(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 || 'font';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-music_small_color${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><rect width="20" height="20" rx="5" fill={useCurrentColor ? 'currentColor' : '#F189A1'} fillOpacity=".2"/><path d="M10.4843 5.89085C10.4843 5.60448 10.6767 5.35381 10.9534 5.27969L14.6763 4.28244C14.8773 4.2286 15.0747 4.38001 15.0747 4.58803L15.0746 6.1785C15.0746 6.46489 14.8822 6.71556 14.6055 6.78968L11.7501 7.55447L11.7501 12.9945L11.7501 12.9994C11.7501 14.5064 10.2225 15.7281 8.33821 15.7281C6.45388 15.7281 4.92633 14.5064 4.92633 12.9994C4.92633 11.4924 6.45388 10.2708 8.33821 10.2708C9.15135 10.2708 9.89805 10.4982 10.4842 10.878V7.07312L10.4842 7.06893L10.4843 5.89085Z" fill={useCurrentColor ? 'currentColor' : '#F189A1'}/></svg>;
}

const IconMusicSmallColor = React.forwardRef(IconMusicSmallColorComponent);
export default IconMusicSmallColor;
