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

function IconPencilLineComponent(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 || 'font';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-pencil-line${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 12 12" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path fillRule="evenodd" clipRule="evenodd" d="M7.89651 1.39656C8.50599 0.787085 9.49414 0.787084 10.1036 1.39656C10.7131 2.00604 10.7131 2.99419 10.1036 3.60367L3.82225 9.88504C3.81235 9.89494 3.80254 9.90477 3.79281 9.91451C3.64908 10.0585 3.52237 10.1855 3.3696 10.2791C3.23539 10.3613 3.08907 10.4219 2.93602 10.4587C2.7618 10.5005 2.58243 10.5003 2.37898 10.5001C2.36521 10.5001 2.35132 10.5001 2.33732 10.5001H1.50005C1.22391 10.5001 1.00005 10.2763 1.00005 10.0001V9.16286C1.00005 9.14886 1.00004 9.13498 1.00003 9.1212C0.999836 8.91776 0.999669 8.73838 1.0415 8.56416C1.07824 8.41111 1.13885 8.26479 1.22109 8.13058C1.31471 7.97781 1.44166 7.85109 1.58565 7.70737C1.5954 7.69764 1.60523 7.68783 1.61513 7.67793L7.89651 1.39656ZM9.39651 2.10367C9.17756 1.88472 8.82257 1.88472 8.60362 2.10367L2.32223 8.38504C2.13245 8.57482 2.09746 8.61436 2.07373 8.65308C2.04632 8.69781 2.02611 8.74659 2.01387 8.7976C2.00326 8.84176 2.00005 8.89447 2.00005 9.16286V9.50011H2.33732C2.60571 9.50011 2.65841 9.4969 2.70257 9.4863C2.75359 9.47405 2.80236 9.45385 2.8471 9.42643C2.88582 9.40271 2.92536 9.36771 3.11514 9.17793L9.39651 2.89656C9.61546 2.67761 9.61546 2.32262 9.39651 2.10367ZM10.8374 8.63108C11.0412 8.81739 11.0554 9.13366 10.8691 9.33747L10.369 9.88449L10.369 9.88454C10.0142 10.2726 9.52293 10.5001 9.00011 10.5001C8.47743 10.5001 7.98629 10.2727 7.63152 9.88484C7.45556 9.69323 7.22745 9.59515 7.00014 9.59515C6.77271 9.59515 6.54446 9.69334 6.36846 9.88517C6.18177 10.0886 5.86548 10.1023 5.66201 9.91556C5.45853 9.72888 5.44493 9.41259 5.63161 9.20911C5.98678 8.82201 6.47777 8.59515 7.00014 8.59515C7.52251 8.59515 8.0135 8.82201 8.36867 9.20911L8.36924 9.20974C8.54486 9.4018 8.77291 9.50012 9.00011 9.50012C9.2273 9.50012 9.45533 9.40182 9.63094 9.20978C9.63096 9.20977 9.63097 9.20975 9.63099 9.20974L10.131 8.66276C10.3173 8.45895 10.6336 8.44476 10.8374 8.63108Z"/></svg>;
}

const IconPencilLine = React.forwardRef(IconPencilLineComponent);
export default IconPencilLine;
