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

function IconPencilSimpleThinComponent(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-PencilSimpleThin${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 17 17" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M15.7586 4.73214L12.268 1.24073C12.1519 1.12463 12.0141 1.03253 11.8624 0.96969C11.7107 0.906853 11.5482 0.874512 11.384 0.874512C11.2198 0.874512 11.0572 0.906853 10.9056 0.96969C10.7539 1.03253 10.6161 1.12463 10.5 1.24073L0.866412 10.8751C0.749834 10.9908 0.657407 11.1284 0.594506 11.2801C0.531604 11.4318 0.499482 11.5945 0.500006 11.7587V15.2501C0.500006 15.5816 0.631702 15.8996 0.866123 16.134C1.10054 16.3684 1.41849 16.5001 1.75001 16.5001H5.24141C5.40563 16.5006 5.5683 16.4685 5.71999 16.4056C5.87168 16.3427 6.00935 16.2503 6.12501 16.1337L15.7586 6.5001C15.8747 6.38403 15.9668 6.24622 16.0296 6.09454C16.0925 5.94286 16.1248 5.7803 16.1248 5.61612C16.1248 5.45194 16.0925 5.28937 16.0296 5.1377C15.9668 4.98602 15.8747 4.84821 15.7586 4.73214ZM5.24141 15.2501H1.75001V11.7587L8.62501 4.8837L12.1164 8.3751L5.24141 15.2501ZM13 7.49073L9.5086 4.0001L11.3836 2.1251L14.875 5.61573L13 7.49073Z"/></svg>;
}

const IconPencilSimpleThin = React.forwardRef(IconPencilSimpleThinComponent);
export default IconPencilSimpleThin;
