overleaf/services/web/frontend/js/shared/components/material-icon.tsx
Rebeka Dekany abb59e4603 Merge pull request #20298 from overleaf/rd-ide-filetree
[web] Migrate the file tree on the editor page to Bootstrap 5

GitOrigin-RevId: e2efec26242c8cdab37a54bc182b83bfb0f1eb3c
2024-09-26 08:05:43 +00:00

34 lines
743 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
}
function MaterialIcon({
type,
className,
accessibilityLabel,
modifier,
...rest
}: IconProps) {
const iconClassName = classNames('material-symbols', className, modifier)
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