mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
0c5ba1e96e
[web] Update managed users icons and improve display on smaller screen sizes GitOrigin-RevId: 7b6263ea9afa9bb52bed3a3f50cbe361e7064085
38 lines
748 B
TypeScript
38 lines
748 B
TypeScript
import classNames from 'classnames'
|
|
import React from 'react'
|
|
|
|
type IconOwnProps = {
|
|
type: string
|
|
category?: 'rounded' | 'outlined'
|
|
accessibilityLabel?: string
|
|
}
|
|
|
|
type IconProps = IconOwnProps &
|
|
Omit<React.ComponentProps<'i'>, keyof IconOwnProps>
|
|
|
|
function MaterialIcon({
|
|
type,
|
|
category = 'rounded',
|
|
className,
|
|
accessibilityLabel,
|
|
...rest
|
|
}: IconProps) {
|
|
const iconClassName = classNames(
|
|
'material-symbols',
|
|
`material-symbols-${category}`,
|
|
className
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<span className={iconClassName} aria-hidden="true" {...rest}>
|
|
{type}
|
|
</span>
|
|
{accessibilityLabel && (
|
|
<span className="sr-only">{accessibilityLabel}</span>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MaterialIcon
|