2023-02-14 05:21:09 -05:00
|
|
|
import classNames from 'classnames'
|
2023-08-25 04:51:45 -04:00
|
|
|
import React from 'react'
|
2024-07-10 09:34:19 -04:00
|
|
|
import { bsVersion } from '@/features/utils/bootstrap-5'
|
2023-02-14 05:21:09 -05:00
|
|
|
|
2024-02-15 04:43:16 -05:00
|
|
|
type IconProps = React.ComponentProps<'i'> & {
|
2023-02-14 05:21:09 -05:00
|
|
|
type: string
|
|
|
|
accessibilityLabel?: string
|
2024-09-25 09:46:02 -04:00
|
|
|
modifier?: string
|
2023-02-14 05:21:09 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
function MaterialIcon({
|
|
|
|
type,
|
|
|
|
className,
|
|
|
|
accessibilityLabel,
|
2024-09-25 09:46:02 -04:00
|
|
|
modifier,
|
2023-02-14 05:21:09 -05:00
|
|
|
...rest
|
|
|
|
}: IconProps) {
|
2024-09-25 09:46:02 -04:00
|
|
|
const iconClassName = classNames('material-symbols', className, modifier)
|
2023-02-14 05:21:09 -05:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<span className={iconClassName} aria-hidden="true" {...rest}>
|
|
|
|
{type}
|
|
|
|
</span>
|
|
|
|
{accessibilityLabel && (
|
2024-07-10 09:34:19 -04:00
|
|
|
<span className={bsVersion({ bs5: 'visually-hidden', bs3: 'sr-only' })}>
|
|
|
|
{accessibilityLabel}
|
|
|
|
</span>
|
2023-02-14 05:21:09 -05:00
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default MaterialIcon
|