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

function IconArrowsClockwiseComponent(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 || 'hkgai';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-ArrowsClockwise${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 24 24" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M21 4.49995V8.99995C21 9.19886 20.921 9.38962 20.7803 9.53028C20.6397 9.67093 20.4489 9.74995 20.25 9.74995H15.75C15.5511 9.74995 15.3603 9.67093 15.2197 9.53028C15.079 9.38962 15 9.19886 15 8.99995C15 8.80103 15.079 8.61027 15.2197 8.46962C15.3603 8.32896 15.5511 8.24995 15.75 8.24995H18.4397L17.0681 6.87838C15.6742 5.47814 13.7817 4.68815 11.8059 4.68182H11.7638C9.80454 4.67723 7.92227 5.44408 6.52406 6.81651C6.38083 6.95022 6.19096 7.02256 5.99507 7.01807C5.79918 7.01358 5.61283 6.9326 5.47588 6.79247C5.33893 6.65233 5.26226 6.46417 5.26227 6.26823C5.26228 6.07229 5.33897 5.88413 5.47594 5.74401C7.1705 4.08782 9.44983 3.16671 11.8193 3.18057C14.1887 3.19444 16.4571 4.14216 18.1322 5.81807L19.5 7.18963V4.49995C19.5 4.30103 19.579 4.11027 19.7197 3.96962C19.8603 3.82896 20.0511 3.74995 20.25 3.74995C20.4489 3.74995 20.6397 3.82896 20.7803 3.96962C20.921 4.11027 21 4.30103 21 4.49995ZM17.4759 17.1834C16.0639 18.5627 14.1651 19.3297 12.1912 19.3181C10.2173 19.3065 8.32762 18.5173 6.93188 17.1215L5.56031 15.7499H8.25C8.44891 15.7499 8.63968 15.6709 8.78033 15.5303C8.92098 15.3896 9 15.1989 9 14.9999C9 14.801 8.92098 14.6103 8.78033 14.4696C8.63968 14.329 8.44891 14.2499 8.25 14.2499H3.75C3.55109 14.2499 3.36032 14.329 3.21967 14.4696C3.07902 14.6103 3 14.801 3 14.9999V19.4999C3 19.6989 3.07902 19.8896 3.21967 20.0303C3.36032 20.1709 3.55109 20.2499 3.75 20.2499C3.94891 20.2499 4.13968 20.1709 4.28033 20.0303C4.42098 19.8896 4.5 19.6989 4.5 19.4999V16.8103L5.87156 18.1818C7.54426 19.8629 9.816 20.8112 12.1875 20.8181H12.2372C14.5885 20.8241 16.8476 19.9036 18.525 18.2559C18.662 18.1158 18.7387 17.9276 18.7387 17.7317C18.7387 17.5357 18.662 17.3476 18.5251 17.2074C18.3881 17.0673 18.2018 16.9863 18.0059 16.9818C17.81 16.9773 17.6201 17.0497 17.4769 17.1834H17.4759Z"/></svg>;
}

const IconArrowsClockwise = React.forwardRef(IconArrowsClockwiseComponent);
export default IconArrowsClockwise;
