overleaf/services/web/frontend/js/shared/components/icon.tsx
Rebeka Dekany fa3f51fb2e Merge pull request #17806 from overleaf/rd-bootstrap-button2
[web] - Updating the Account Settings page with the Button and Icon Button wrappers

GitOrigin-RevId: 135c4ddaa64d009d3ab8cdfef9cff899fd77669c
2024-04-17 08:05:10 +00:00

47 lines
888 B
TypeScript

import classNames from 'classnames'
import { bsVersion } from '@/features/utils/bootstrap-5'
type IconOwnProps = {
type: string
spin?: boolean
fw?: boolean
modifier?: string
accessibilityLabel?: string
}
export type IconProps = IconOwnProps &
Omit<React.ComponentProps<'i'>, keyof IconOwnProps>
function Icon({
type,
spin,
fw,
modifier,
className = '',
accessibilityLabel,
...rest
}: IconProps) {
const iconClassName = classNames(
'fa',
`fa-${type}`,
{
'fa-spin': spin,
'fa-fw': fw,
[`fa-${modifier}`]: modifier,
},
className
)
return (
<>
<i className={iconClassName} aria-hidden="true" {...rest} />
{accessibilityLabel && (
<span className={bsVersion({ bs5: 'visually-hidden', bs3: 'sr-only' })}>
{accessibilityLabel}
</span>
)}
</>
)
}
export default Icon