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

function IconQuestionCircleComponent(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 || 'hkgai';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-QuestionCircle${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><g clipPath="url(#svg_0cc175b9c0__clip0_3842_13270)"><path d="M61.8962 31.3222C61.8962 39.6294 58.641 47.5963 52.8468 53.4703C47.0527 59.3444 39.194 62.6444 30.9998 62.6444C22.8056 62.6444 14.947 59.3444 9.15284 53.4703C3.35865 47.5963 0.103516 39.6294 0.103516 31.3222C0.103516 23.015 3.35865 15.0481 9.15284 9.17406C14.947 3.30001 22.8056 0 30.9998 0C39.194 0 47.0527 3.30001 52.8468 9.17406C58.641 15.0481 61.8962 23.015 61.8962 31.3222ZM21.3293 23.6209H24.5155C25.0484 23.6209 25.4733 23.1784 25.5428 22.642C25.8904 20.0736 27.6283 18.2021 30.7256 18.2021C33.375 18.2021 35.8004 19.5451 35.8004 22.7752C35.8004 25.2614 34.3559 26.4046 32.0735 28.143C29.4743 30.0576 27.4159 32.2932 27.5626 35.9226L27.5742 36.7723C27.5783 37.0291 27.6818 37.2741 27.8624 37.4543C28.043 37.6345 28.2863 37.7355 28.5397 37.7354H31.6718C31.9279 37.7354 32.1735 37.6323 32.3545 37.4487C32.5356 37.2652 32.6373 37.0162 32.6373 36.7566V36.3455C32.6373 33.5343 33.6917 32.716 36.538 30.5274C38.89 28.7146 41.3424 26.7022 41.3424 22.4776C41.3424 16.5616 36.4144 13.7035 31.0191 13.7035C26.1259 13.7035 20.7654 16.0135 20.3985 22.6538C20.3932 22.7802 20.4135 22.9064 20.4581 23.0246C20.5027 23.1428 20.5707 23.2505 20.6579 23.3411C20.7451 23.4317 20.8496 23.5032 20.9651 23.5513C21.0805 23.5994 21.2045 23.6231 21.3293 23.6209ZM30.3085 48.847C32.6644 48.847 34.2826 47.3044 34.2826 45.2175C34.2826 43.0563 32.6605 41.5372 30.3085 41.5372C28.0531 41.5372 26.4117 43.0563 26.4117 45.2175C26.4117 47.3044 28.0492 48.847 30.3085 48.847Z" fill={useCurrentColor ? 'currentColor' : 'url(#svg_0cc175b9c0__paint0_linear_3842_13270)'}/></g><defs><linearGradient id="svg_0cc175b9c0__paint0_linear_3842_13270" x1=".104" y1="8.608" x2="63.401" y2="58.504" gradientUnits="userSpaceOnUse"><stop offset=".158" stopColor="#143975"/><stop offset="1" stopColor="#A5E1DA"/></linearGradient><clipPath id="svg_0cc175b9c0__clip0_3842_13270"><path fill={useCurrentColor ? 'currentColor' : '#fff'} transform="translate(.104)" d="M0 0H61.793V62.644H0z"/></clipPath></defs></svg>;
}

const IconQuestionCircle = React.forwardRef(IconQuestionCircleComponent);
export default IconQuestionCircle;
