overleaf/services/web/frontend/js/shared/components/icon.js
Alf Eaton f065a7a909 Improve the Icon component (#6245)
GitOrigin-RevId: fbb23b32c47edbe5a22badc627318accbd09e82a
2022-01-20 09:03:58 +00:00

51 lines
969 B
JavaScript

import PropTypes from 'prop-types'
import classNames from 'classnames'
/**
* @param {string} type
* @param {boolean} [spin]
* @param {boolean} [fw]
* @param {string} [modifier]
* @param {string} [className]
* @param {string} [accessibilityLabel]
* @return {JSX.Element}
*/
function Icon({
type,
spin,
fw,
modifier,
className = '',
accessibilityLabel,
}) {
const iconClassName = classNames(
'fa',
`fa-${type}`,
{
'fa-spin': spin,
'fa-fw': fw,
[`fa-${modifier}`]: modifier,
},
className
)
return (
<>
<i className={iconClassName} aria-hidden="true" />
{accessibilityLabel && (
<span className="sr-only">{accessibilityLabel}</span>
)}
</>
)
}
Icon.propTypes = {
type: PropTypes.string.isRequired,
spin: PropTypes.bool,
fw: PropTypes.bool,
modifier: PropTypes.string,
className: PropTypes.string,
accessibilityLabel: PropTypes.string,
}
export default Icon