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

function IconWebSmallColorComponent(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-web_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' : '#8CA9E0'} fillOpacity=".2"/><path fillRule="evenodd" clipRule="evenodd" d="M10.3622 3.0693C14.0291 3.25515 16.9455 6.28697 16.9455 10L16.9361 10.3569C16.7502 14.0237 13.7183 16.94 10.0054 16.9401L9.99732 16.9388L9.99464 16.9401L9.98659 16.9388L9.64851 16.9307C6.09977 16.751 3.25452 13.9056 3.07466 10.3569L3.06795 10.1422C3.05843 10.0964 3.05453 10.0487 3.05453 10C3.05453 9.95089 3.05826 9.90268 3.06795 9.85646C3.14434 6.08989 6.22051 3.05991 10.0054 3.05991L10.3622 3.0693ZM13.2225 10.6936C13.0985 12.1908 12.573 13.6732 11.6448 15.0444L11.4248 15.3664C13.5859 14.7963 15.229 12.9574 15.5113 10.6936H13.2225ZM4.4981 10.6936C4.77902 12.9468 6.40901 14.7791 8.5551 15.3584L8.34313 15.0444C7.4149 13.6732 6.88946 12.1908 6.7654 10.6936H4.4981ZM8.15933 10.6936C8.28102 11.9191 8.7239 13.1323 9.49154 14.2663L9.9933 15.0069L10.4964 14.2663C11.264 13.1323 11.7069 11.9191 11.8286 10.6936H8.15933ZM11.6448 4.95559C12.573 6.32684 13.0985 7.80925 13.2225 9.3064H15.5126C15.2305 7.04274 13.5869 5.20265 11.4261 4.63226L11.6448 4.95559ZM9.49154 5.73372C8.72404 6.86776 8.28108 8.08091 8.15933 9.3064H11.8286C11.7069 8.08093 11.2639 6.86776 10.4964 5.73372L9.9933 4.99047L9.49154 5.73372ZM8.5551 4.64031C6.40878 5.21954 4.77893 7.053 4.4981 9.3064H6.7654C6.88948 7.80923 7.41494 6.32684 8.34313 4.95559L8.5551 4.64031Z" fill={useCurrentColor ? 'currentColor' : '#8CA9E0'}/></svg>;
}

const IconWebSmallColor = React.forwardRef(IconWebSmallColorComponent);
export default IconWebSmallColor;
