overleaf/services/web/frontend/js/shared/components/material-icon.tsx
Rebeka Dekany f8efc3e2ae Merge pull request #20740 from overleaf/rd-ide-offcanvas
[web] Implement the editor's left menu in Offcanvas

GitOrigin-RevId: 999e995d664b1dc958f56643f05e95b8aa2d6290
2024-10-14 11:09:31 +00:00

38 lines
800 B
TypeScript

import classNames from 'classnames'
import React from 'react'
import { bsVersion } from '@/features/utils/bootstrap-5'
type IconProps = React.ComponentProps<'i'> & {
type: string
accessibilityLabel?: string
modifier?: string
size?: '2x'
}
function MaterialIcon({
type,
className,
accessibilityLabel,
modifier,
size,
...rest
}: IconProps) {
const iconClassName = classNames('material-symbols', className, modifier, {
[`size-${size}`]: size,
})
return (
<>
<span className={iconClassName} aria-hidden="true" {...rest}>
{type}
</span>
{accessibilityLabel && (
<span className={bsVersion({ bs5: 'visually-hidden', bs3: 'sr-only' })}>
{accessibilityLabel}
</span>
)}
</>
)
}
export default MaterialIcon