<div className={'ant-alert' + (type ? " ant-alert-" + type : "") + (!showIcon ? " ant-alert-no-icon" : "") + (description?" ant-alert-with-description":"")}>
    {showIcon && type === 'warning' && <span className="anticon ant-alert-icon"><antd-icon type="ExclamationCircleFilled"></antd-icon></span>}
    {showIcon && type === 'success' && <span className="anticon ant-alert-icon"><antd-icon type="CheckCircleFilled"></antd-icon></span>}
    {showIcon && type === 'info' && <span className="anticon ant-alert-icon"><antd-icon type="InfoCircleFilled"></antd-icon></span>}
    {showIcon && type === 'error' && <span className="anticon ant-alert-icon"><antd-icon type="CloseCircleFilled"></antd-icon></span>}
    <div className="ant-alert-content">
        <div className="ant-alert-message">{message}</div>
        {description && <div className="ant-alert-description" ><antd-slot content="{{description}}"></antd-slot></div>}
    </div>
</div>