<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>