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

function IconCsvSmallColorComponent(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-csv_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' : '#69B889'} fillOpacity=".2"/><path d="M10.257 3.46976C11.751 3.46976 12.993 3.84776 13.965 4.63976C14.901 5.39576 15.477 6.43976 15.675 7.73576H13.767C13.551 6.87176 13.137 6.22376 12.525 5.80976C11.913 5.39576 11.157 5.19776 10.221 5.19776C8.83499 5.19776 7.79099 5.66576 7.08899 6.61976C6.42299 7.48376 6.09899 8.67176 6.09899 10.1658C6.09899 11.7138 6.42299 12.9018 7.07099 13.7478C7.75499 14.6478 8.81699 15.0978 10.257 15.0978C11.193 15.0978 11.985 14.8638 12.597 14.3958C13.245 13.8918 13.695 13.1358 13.947 12.1278H15.855C15.567 13.6218 14.901 14.7918 13.839 15.6378C12.849 16.4298 11.661 16.8258 10.275 16.8258C8.16899 16.8258 6.58499 16.1418 5.52299 14.8098C4.58699 13.6578 4.13699 12.1098 4.13699 10.1658C4.13699 8.25776 4.60499 6.70976 5.57699 5.50376C6.65699 4.13576 8.20499 3.46976 10.257 3.46976Z" fill={useCurrentColor ? 'currentColor' : '#69B889'}/></svg>;
}

const IconCsvSmallColor = React.forwardRef(IconCsvSmallColorComponent);
export default IconCsvSmallColor;
