overleaf/services/web/frontend/js/shared/components/icon.tsx
ilkin-overleaf a9436039b6 Merge pull request #17702 from overleaf/ii-bs5-to-bs3-classname-helper
[web] Bootstrap class name helper

GitOrigin-RevId: 9c2042aa2ea0e4d3828b32c321336e1c3a4a0ef8
2024-04-04 08:04:11 +00:00

49 lines
911 B
TypeScript

import classNames from 'classnames'
import { bsClassName } 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={bsClassName({ bs5: 'visually-hidden', bs3: 'sr-only' })}
>
{accessibilityLabel}
</span>
)}
</>
)
}
export default Icon