@ant-design/icons#ExclamationCircleFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#ExclamationCircleFilled.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: InlineMessage.tsx From posthog-foss with MIT License | 6 votes |
|
// New UI for inline inline messages (e.g. info/warning/error)
export function InlineMessage({
children,
style,
icon = <ExclamationCircleFilled />,
type = 'info',
closable,
onClose,
}: InlineMessageProps): JSX.Element {
const [shown, setShown] = useState(true)
const handleClose = (): void => {
setShown(false)
onClose?.()
}
return (
<div className={clsx('inline-message', type, closable && 'closable', !shown && 'hidden')} style={style}>
<div className="inline-icon">{icon}</div>
<div className="inline-main">{children}</div>
{closable && (
<div className="closable" onClick={handleClose}>
<CloseOutlined />
</div>
)}
</div>
)
}
Example #2
| Source File: Signup.tsx From posthog-foss with MIT License | 6 votes |
|
requiredRule = (message: string): Rule[] | undefined => {
return [
{
required: true,
message: (
<>
<ExclamationCircleFilled style={{ marginLeft: 4 }} /> {message}
</>
),
},
]
}
Example #3
| Source File: PasswordInput.tsx From posthog-foss with MIT License | 5 votes |
|
PasswordInput = React.forwardRef(function PasswordInputInternal(
{
label = 'Password',
showStrengthIndicator,
validateMinLength,
style,
validationDisabled,
disabled,
inputName = 'password',
...props
}: PasswordInputProps,
ref: React.Ref<Input>
): JSX.Element {
return (
<div style={{ marginBottom: 24, ...style }} className="password-input">
<div style={{ display: 'flex', alignItems: 'center' }} className="ant-form-item-label">
<label htmlFor="password">{label}</label>
{showStrengthIndicator && (
<Form.Item
shouldUpdate={(prevValues, currentValues) => prevValues.password !== currentValues.password}
className="password-input-strength-indicator"
>
{({ getFieldValue }) => (
<Suspense fallback={<></>}>
<div
style={{
display: 'flex',
overflow: 'hidden',
whiteSpace: 'nowrap',
paddingLeft: '60%',
}}
>
<PasswordStrength password={getFieldValue('password')} />
</div>
</Suspense>
)}
</Form.Item>
)}
</div>
<Form.Item
name={inputName}
rules={
!validationDisabled
? [
{
required: true,
message: (
<>
<ExclamationCircleFilled style={{ marginRight: 4 }} /> Please enter your
password to continue
</>
),
},
{
min: validateMinLength ? 8 : undefined,
message: (
<>
<ExclamationCircleFilled style={{ marginRight: 4 }} /> Password must be at
least 8 characters
</>
),
},
]
: undefined
}
style={showStrengthIndicator ? { marginBottom: 0 } : undefined}
{...props}
>
<Input.Password
ref={ref}
className="ph-ignore-input"
data-attr="password"
placeholder="••••••••••"
disabled={disabled}
/>
</Form.Item>
</div>
)
})
Example #4
| Source File: PasswordReset.tsx From posthog-foss with MIT License | 5 votes |
|
function ResetForm(): JSX.Element {
const { resetResponseLoading, resetResponse } = useValues(passwordResetLogic)
const { reset } = useActions(passwordResetLogic)
const [form] = Form.useForm()
return (
<>
<div className="text-center mb">
Enter your email address. If an account exists, you’ll receive an email with a password reset link soon.
</div>
{!resetResponseLoading && resetResponse?.errorCode && (
<InlineMessage style={{ marginBottom: 16 }} type="danger">
{resetResponse.errorDetail || 'Could not complete your password reset request. Please try again.'}
</InlineMessage>
)}
<Form
layout="vertical"
form={form}
onFinish={(values) => reset({ email: values.email })}
requiredMark={false}
noValidate
>
<Form.Item
name="email"
label="Email"
rules={[
{
required: true,
message: (
<>
<ExclamationCircleFilled style={{ marginLeft: 4 }} /> Please enter your email to
continue
</>
),
},
]}
>
<Input
className="ph-ignore-input"
autoFocus
data-attr="reset-email"
placeholder="[email protected]"
type="email"
disabled={resetResponseLoading}
/>
</Form.Item>
<Form.Item>
<Button
className="btn-bridge"
htmlType="submit"
data-attr="password-reset"
loading={resetResponseLoading}
block
>
Continue
</Button>
</Form.Item>
</Form>
</>
)
}
Example #5
| Source File: PasswordResetComplete.tsx From posthog-foss with MIT License | 5 votes |
|
function NewPasswordForm(): JSX.Element {
const [form] = Form.useForm()
const { updatePassword } = useActions(passwordResetLogic)
const { newPasswordResponse, newPasswordResponseLoading } = useValues(passwordResetLogic)
return (
<>
<div className="text-center mb">Please enter a new password for your account.</div>
{!newPasswordResponseLoading && newPasswordResponse?.errorCode && (
<InlineMessage style={{ marginBottom: 16 }} type="danger">
{newPasswordResponse.errorDetail ||
'Could not complete your password reset request. Please try again.'}
</InlineMessage>
)}
<Form
layout="vertical"
form={form}
onFinish={(values) => updatePassword(values)}
requiredMark={false}
noValidate
>
<PasswordInput
disabled={newPasswordResponseLoading}
showStrengthIndicator
validateMinLength
help={
<span style={{ display: 'flex', alignItems: 'center' }}>
<ExclamationCircleFilled style={{ marginRight: 4 }} />
Passwords must be at least 8 characters
</span>
}
/>
<PasswordInput
disabled={newPasswordResponseLoading}
validationDisabled
label="Confirm new password"
name="passwordConfirm"
/>
<Form.Item>
<Button
className="btn-bridge"
htmlType="submit"
data-attr="password-reset-complete"
loading={newPasswordResponseLoading}
block
>
Change my password
</Button>
</Form.Item>
</Form>
</>
)
}
Example #6
| Source File: Notifications.tsx From jitsu with MIT License | 5 votes |
|
makeBadgeByNotificationType = (type: NotificationData["type"]): React.ReactNode => {
switch (type) {
case "danger":
return <ExclamationCircleFilled className={styles.dangerIcon} />
default:
return undefined
}
}
Example #7
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 5 votes |
|
DelPopover: React.FC<PopoverProps> = (props: PopoverProps) => {
const { t } = useTranslation();
const { userId, teamId, memberId, userType, onClose, isIcon } = props;
const [visible, setVisible] = useState<boolean>(false);
const handleDelete = () => {
if (userType === 'user' && userId) {
deleteUser(userId).then((_) => {
message.success(t('用户删除成功'));
onClose();
});
}
if (userType === 'team' && teamId) {
deleteTeam(teamId).then((_) => {
message.success(t('团队删除成功'));
onClose();
});
}
if (userType === 'member' && teamId && memberId) {
let params = {
ids: [memberId],
};
deleteMember(teamId, params).then((_) => {
message.success(t('成员删除成功'));
onClose();
});
}
};
return (
<Popover
trigger='click'
visible={visible}
content={
<div className='popover-wrapper'>
<ExclamationCircleFilled
style={{
marginRight: '4px',
color: '#E6A23C',
}}
/>
{t('确定要删除么？')}
<div className='popover-content'>
<Button type='primary' size='small' onClick={() => handleDelete()}>
{t('确定')}
</Button>
<Button size='small' onClick={() => setVisible(false)}>
{t('取消')}
</Button>
</div>
</div>
}
>
{isIcon ? (
<DeleteTwoTone
style={{
marginLeft: '8px',
fontSize: '16px',
}}
twoToneColor='#ff4d4f'
onClick={() => setVisible(true)}
/>
) : (
<Button
className='oper-name'
type='text'
danger
onClick={() => setVisible(true)}
>
{t('删除')}
</Button>
)}
</Popover>
);
}
Example #8
| Source File: Login.tsx From posthog-foss with MIT License | 4 votes |
|
export function Login(): JSX.Element {
const [form] = Form.useForm()
const { authenticate } = useActions(loginLogic)
const { authenticateResponseLoading, authenticateResponse } = useValues(loginLogic)
const { preflight } = useValues(preflightLogic)
return (
<div className="bridge-page login">
<Row>
<Col span={24} className="auth-main-content">
<WelcomeLogo view="login" />
<div className="inner">
<h2 className="subtitle" style={{ justifyContent: 'center' }}>
Get started
</h2>
{!authenticateResponseLoading && authenticateResponse?.errorCode && (
<InlineMessage style={{ marginBottom: 16 }} type="danger">
{authenticateResponse?.errorDetail ||
ERROR_MESSAGES[authenticateResponse.errorCode] ||
'Could not complete your login. Please try again.'}
</InlineMessage>
)}
<Form
layout="vertical"
form={form}
onFinish={(values) => authenticate(values)}
requiredMark={false}
noValidate
>
<Form.Item
name="email"
label="Email"
rules={[
{
required: true,
message: (
<>
<ExclamationCircleFilled style={{ marginLeft: 4 }} /> Please enter your
email to continue
</>
),
},
]}
>
<Input
className="ph-ignore-input"
autoFocus
data-attr="login-email"
placeholder="[email protected]"
type="email"
/>
</Form.Item>
<PasswordInput />
<Form.Item>
<Button
className="btn-bridge"
htmlType="submit"
data-attr="password-signup"
loading={authenticateResponseLoading}
block
>
Login
</Button>
</Form.Item>
</Form>
<div className={clsx('helper-links', { cloud: preflight?.cloud })}>
{preflight?.cloud && (
<Link to="/signup" data-attr="signup" className="lhs">
Create an account
</Link>
)}
<Link to="/reset" data-attr="forgot-password" className="rhs">
Forgot your password?
</Link>
</div>
<SocialLoginButtons caption="Or log in with" />
</div>
</Col>
</Row>
</div>
)
}
Example #9
| Source File: Signup.tsx From posthog-foss with MIT License | 4 votes |
|
export function Signup(): JSX.Element | null {
const [form] = Form.useForm()
const { preflight } = useValues(preflightLogic)
const { user } = useValues(userLogic)
const { signupResponse, signupResponseLoading, initialEmail, formSubmitted } = useValues(signupLogic)
const { signup, setFormSubmitted } = useActions(signupLogic)
const emailInputRef = useRef<Input | null>(null)
const passwordInputRef = useRef<Input | null>(null)
useEffect(() => {
// There's no password in the demo environment
if (!preflight?.demo && initialEmail) {
passwordInputRef?.current?.focus()
} else {
emailInputRef?.current?.focus()
}
}, [initialEmail])
const handleFormSubmit = async (values: Record<string, string>): Promise<void> => {
setFormSubmitted(true)
if (
await form.validateFields(
!preflight?.demo
? ['email', 'password', 'first_name', 'organization_name']
: ['email', 'first_name', 'organization_name']
)
) {
signup(values)
}
}
const footerHighlights = {
cloud: ['Hosted & managed by PostHog', 'Pay per event, cancel anytime', 'Community, Slack & email support'],
selfHosted: [
'Fully featured product, unlimited events',
'Data in your own infrastructure',
'Community, Slack & email support',
],
}
return !user ? (
<div className="bridge-page signup">
<Row>
<Col span={24} className="auth-main-content">
<img src={hedgehogMain} alt="" className="main-art" />
<div className="inner-wrapper">
<WelcomeLogo view="signup" />
<div className="inner">
<h2 className="subtitle" style={{ justifyContent: 'center' }}>
{!preflight?.demo ? 'Get started' : 'Explore PostHog yourself'}
</h2>
{!preflight?.demo && (preflight?.cloud || preflight?.initiated) && (
// If we're in the demo environment, login is unified with signup and it's passwordless
// For now, if you're not on Cloud, you wouldn't see this page,
// but future-proofing this (with `preflight.initiated`) in case this changes
<div className="text-center">
Already have an account?{' '}
<Link to="/login" data-attr="signup-login-link">
Log in
</Link>
</div>
)}
{!signupResponseLoading &&
signupResponse?.errorCode &&
!['email', 'password'].includes(signupResponse?.errorAttribute || '') && (
<InlineMessage style={{ marginBottom: 16 }} type="danger">
{signupResponse?.errorDetail ||
'Could not complete your signup. Please try again.'}
</InlineMessage>
)}
<Form
layout="vertical"
form={form}
onFinish={handleFormSubmit}
requiredMark={false}
initialValues={{ email: initialEmail }}
noValidate
>
<Form.Item
name="email"
label="Email"
rules={
formSubmitted
? [
...(requiredRule('Please enter your email to continue') || []),
{
type: 'email',
message: (
<>
<ExclamationCircleFilled style={{ marginLeft: 4 }} />{' '}
Please enter a valid email
</>
),
},
]
: undefined
}
validateStatus={signupResponse?.errorAttribute === 'email' ? 'error' : undefined}
help={
signupResponse?.errorAttribute === 'email'
? signupResponse.errorDetail
: undefined
}
>
<Input
className="ph-ignore-input"
autoFocus
data-attr="signup-email"
placeholder="[email protected]"
type="email"
ref={emailInputRef}
disabled={signupResponseLoading}
/>
</Form.Item>
{!preflight?.demo && (
<PasswordInput
ref={passwordInputRef}
showStrengthIndicator
validateStatus={
signupResponse?.errorAttribute === 'password' ? 'error' : undefined
}
help={
signupResponse?.errorAttribute === 'password' ? (
signupResponse.errorDetail
) : (
<span style={{ paddingBottom: 16 }}>
<ExclamationCircleFilled style={{ marginRight: 4 }} />
Passwords must be at least 8 characters
</span>
)
}
validateMinLength
validationDisabled={!formSubmitted}
disabled={signupResponseLoading}
/>
)}
<Form.Item
name="first_name"
label="Your name"
rules={formSubmitted ? requiredRule('Please enter your name') : undefined}
>
<Input
className="ph-ignore-input"
autoFocus
data-attr="signup-first-name"
placeholder="Jane Doe"
disabled={signupResponseLoading}
/>
</Form.Item>
<Form.Item
name="organization_name"
label="Organization name"
rules={
formSubmitted
? requiredRule('Please enter the name of your organization')
: undefined
}
>
<Input
className="ph-ignore-input"
data-attr="signup-organization-name"
placeholder="Hogflix Movies"
disabled={signupResponseLoading}
/>
</Form.Item>
<Form.Item className="text-center" style={{ marginTop: 32 }}>
By {!preflight?.demo ? 'creating an account' : 'entering the demo environment'}, you
agree to our{' '}
<a href={`https://posthog.com/terms?${UTM_TAGS}`} target="_blank" rel="noopener">
Terms of Service
</a>{' '}
and{' '}
<a href={`https://posthog.com/privacy?${UTM_TAGS}`} target="_blank" rel="noopener">
Privacy Policy
</a>
.
</Form.Item>
<Form.Item>
<Button
className="btn-bridge"
htmlType="submit"
data-attr="signup-submit"
block
loading={signupResponseLoading}
>
{!preflight?.demo ? 'Create account' : 'Enter the demo environment'}
</Button>
</Form.Item>
</Form>
{!preflight?.demo && (
<div>
<SocialLoginButtons caption="Or sign up with" />
</div>
)}
</div>
</div>
</Col>
</Row>
<footer>
<div className="footer-inner">
{footerHighlights[preflight?.cloud ? 'cloud' : 'selfHosted'].map((val, idx) => (
<span key={idx}>{val}</span>
))}
</div>
</footer>
</div>
) : null
}
Example #10
| Source File: DevicesPage.tsx From iot-center-v2 with MIT License | 4 votes |
|
DevicesPage: FunctionComponent<Props> = ({helpCollapsed}) => {
const [loading, setLoading] = useState(true)
const [message, setMessage] = useState<Message | undefined>(undefined)
const [data, setData] = useState(NO_DEVICES)
const [dataStamp, setDataStamp] = useState(0)
const [lastEntries, setLastEntries] = useState(NO_ENTRIES)
useEffect(() => {
setLoading(true)
const fetchDevices = async () => {
try {
const response = await fetch('/api/devices')
if (response.status >= 300) {
const text = await response.text()
throw new Error(`${response.status} ${text}`)
}
const data = (await response.json()) as Array<DeviceInfo>
setData(data)
setLastEntries(
await Promise.all(
data.map(({deviceId}) => fetchLastEntryTime(deviceId))
)
)
} catch (e) {
setMessage({
title: 'Cannot fetch data',
description: String(e),
type: 'error',
})
} finally {
setLoading(false)
}
}
fetchDevices()
}, [dataStamp])
const removeAuthorization = async (device: DeviceInfo) => {
try {
setLoading(true)
const response = await fetch(`/api/devices/${device.deviceId}`, {
method: 'DELETE',
})
if (response.status >= 300) {
const text = await response.text()
throw new Error(`${response.status} ${text}`)
}
setLoading(false)
antdMessage.success(`Device ${device.deviceId} was unregistered`, 2)
} catch (e) {
setLoading(false)
setMessage({
title: 'Cannot remove device',
description: String(e),
type: 'error',
})
} finally {
setDataStamp(dataStamp + 1)
}
}
const addAuthorization = async (deviceId: string, deviceType: string) => {
try {
setLoading(true)
const response = await fetch(`/api/env/${deviceId}`)
if (response.status >= 300) {
const text = await response.text()
throw new Error(`${response.status} ${text}`)
}
const {newlyRegistered} = await response.json()
if (newlyRegistered && deviceType !== '') {
const setTypeResponse = await fetch(
`/api/devices/${deviceId}/type/${deviceType}`,
{
method: 'POST',
}
)
if (setTypeResponse.status >= 300) {
const text = await setTypeResponse.text()
throw new Error(`${setTypeResponse.status} ${text}`)
}
}
setLoading(false)
if (newlyRegistered) {
antdMessage.success(`Device '${deviceId}' was registered`, 2)
} else {
antdMessage.success(`Device '${deviceId}' is already registered`, 2)
}
} catch (e) {
setLoading(false)
setMessage({
title: 'Cannot register device',
description: String(e),
type: 'error',
})
} finally {
setDataStamp(dataStamp + 1)
}
}
// define table columns
const columnDefinitions: ColumnsType<DeviceInfo> = [
{
title: 'Device ID',
dataIndex: 'deviceId',
defaultSortOrder: 'ascend',
render: (deviceId: string) => (
<Link to={`/devices/${deviceId}`}>{deviceId}</Link>
),
},
{
title: 'Registration Time',
dataIndex: 'createdAt',
responsive: helpCollapsed ? ['lg'] : ['xxl'],
},
{
title: 'Last Entry',
dataIndex: 'deviceId',
render: (id: string) => {
const lastEntry = lastEntries.find(
({deviceId}) => deviceId === id
)?.lastEntry
if (lastEntry != null && lastEntry !== 0)
return timeFormatter({
timeZone: 'UTC',
format: 'YYYY-MM-DD HH:mm:ss ZZ',
})(lastEntry)
},
responsive: helpCollapsed ? ['xl'] : [],
},
{
title: '',
key: 'action',
align: 'right',
render: (_: string, device: DeviceInfo) => (
<>
<Tooltip title="Go to device settings" placement="topRight">
<Button
type="text"
icon={<IconSettings />}
href={`/devices/${device.deviceId}`}
/>
</Tooltip>
<Tooltip title="Go to device dashboard" placement="topRight">
<Button
type="text"
icon={<IconDashboard />}
href={`/dashboard/${device.deviceId}`}
/>
</Tooltip>
<Popconfirm
icon={<ExclamationCircleFilled style={{color: 'red'}} />}
title={`Are you sure to remove '${device.deviceId}' ?`}
onConfirm={() => removeAuthorization(device)}
okText="Yes"
okType="danger"
cancelText="No"
>
<Tooltip title="Remove device" placement="topRight" color="red">
<Button type="text" icon={<IconDelete />} />
</Tooltip>
</Popconfirm>
</>
),
},
]
return (
<PageContent
title="Device Registrations"
spin={loading}
message={message}
titleExtra={
<>
<Tooltip title="Register a new Device">
<Button
onClick={() => {
let deviceId = ''
let deviceType = ''
Modal.confirm({
title: 'Register Device',
icon: '',
content: (
<Form
name="registerDevice"
initialValues={{deviceId, deviceType}}
>
<Form.Item
name="deviceId"
rules={[
{required: true, message: 'Please input device ID !'},
]}
>
<Input
placeholder="Device ID"
onChange={(e) => {
deviceId = e.target.value
}}
/>
<Input
placeholder="Device type"
onChange={(e) => {
deviceType = e.target.value
}}
/>
</Form.Item>
</Form>
),
onOk: () => {
addAuthorization(deviceId, deviceType)
},
okText: 'Register',
})
}}
>
Register
</Button>
</Tooltip>
<Tooltip title="Reload Table">
<Button
type="primary"
onClick={() => setDataStamp(dataStamp + 1)}
style={{marginRight: '8px'}}
>
Reload
</Button>
</Tooltip>
</>
}
>
<Table
dataSource={data}
columns={columnDefinitions}
rowKey={deviceTableRowKey}
/>
</PageContent>
)
}
Example #11
| Source File: BrickAlert.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
|
export function BrickAlert(props: BrickAlertProps): React.ReactElement {
const [show, setShow] = React.useState<boolean>(false);
const theme = useCurrentTheme();
const onClose = () => {
props.onClose?.();
};
// istanbul ignore next
const message = props.enableMessageSlot ? (
<>
{props.foldDesc ? (
<>
<span style={{ ...props.messageStyle }}>
<slot name="message"></slot>
</span>
<span
onClick={() => {
setShow(!show);
}}
style={{
marginLeft: "5px",
color: "var(--bg-color-button-link)",
cursor: "pointer",
}}
>
<span style={{ ...props.messageStyle }}>
{props.foldDescLabel ?? "故障排查"}
</span>
<UpOutlined
rotate={show ? 0 : 180}
style={{ marginLeft: "4px", lineHeight: "0px", fontSize: "12px" }}
/>
</span>
</>
) : (
<div>
<slot name="message"></slot>
</div>
)}
</>
) : (
<span style={{ ...props.messageStyle }}>{props.message}</span>
);
const action = props.enableActionSlot ? (
<div>
<slot name="action"></slot>
</div>
) : null;
let desc = props.enableDescSlot ? (
<div>
<slot name="description"></slot>
</div>
) : (
props.description
);
if (props.foldDesc) {
desc = <div style={{ display: show ? "block" : "none" }}>{desc}</div>;
}
const text =
props.closeOnce && props.closable ? (
<span style={{ color: "var(--text-color-link)" }}>
不再提示 <CloseOutlined style={{ color: "var(--text-color-link)" }} />
</span>
) : (
""
);
// istanbul ignore next
const getThemeIcon = useCallback(
(
lightIcon: React.ReactElement,
darkIcon: React.ReactElement
): React.ReactElement => {
return theme == "dark-v2" ? darkIcon : lightIcon;
},
[theme]
);
const customIcon = () => {
let icon: React.ReactNode;
let iconRender: any;
if (props.iconSize === "big") {
switch (props.type) {
case "info":
iconRender = getThemeIcon(
<BigInfoCircleOutlined />,
<BigInfoCircleOutlinedDark />
);
break;
case "success":
iconRender = getThemeIcon(
<BigSuccessCircleOutlined />,
<BigSuccessCircleOutlinedDark />
);
break;
case "warning":
iconRender = getThemeIcon(
<BigWarningCircleOutlined />,
<BigWarningCircleOutlinedDark />
);
break;
case "error":
iconRender = getThemeIcon(
<BigErrorCircleOutlined />,
<BigErrorCircleOutlinedDark />
);
break;
}
icon = <Icon component={() => iconRender} />;
}
if (props.iconSize === "small") {
const iconStyle: CSSProperties = { position: "relative", top: "5px" };
const componentStyrle: CSSProperties = { fontSize: "14px" };
switch (props.type) {
case "info":
iconRender = <InfoCircleFilled style={componentStyrle} />;
break;
case "success":
iconRender = <CheckCircleFilled style={componentStyrle} />;
break;
case "warning":
iconRender = <ExclamationCircleFilled style={componentStyrle} />;
break;
case "error":
iconRender = <CloseCircleFilled style={componentStyrle} />;
break;
}
icon = <Icon style={iconStyle} component={() => iconRender} />;
}
return icon;
};
return (
<Alert
className={classnames(
{
[cssStyle.closeOnce]: props.closeOnce && props.closable,
},
props.noBorderRadio ? cssStyle.noBorderRadio : null
)}
type={props.type}
message={message}
showIcon={props.showIcon}
closable={props.closable}
onClose={onClose}
description={desc}
closeText={text}
action={action}
{...(customIcon() ? { icon: customIcon() } : {})}
/>
);
}
