enhancement(icon): add title attribute for icons

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2023-07-02 17:21:59 +02:00
parent 9030bbd454
commit 74b92f2bbb

View file

@ -14,9 +14,19 @@ export interface UiIconProps {
size?: number | string size?: number | string
className?: string className?: string
spin?: boolean spin?: boolean
title?: string
} }
export const UiIcon: React.FC<UiIconProps> = ({ icon, nbsp, className, size, spin }) => { /**
* Renders an icon from react-bootstrap-icons.
* @param icon The icon to render
* @param nbsp True to render a non-breaking space after the icon
* @param className Additional CSS classes to apply to the icon
* @param size The size of the icon in em or as a valid width/height CSS value
* @param spin True to spin the icon
* @param title The title of the icon
*/
export const UiIcon: React.FC<UiIconProps> = ({ icon, nbsp, className, size, spin, title }) => {
const finalSize = useMemo(() => { const finalSize = useMemo(() => {
if (size === undefined) { if (size === undefined) {
return '1em' return '1em'
@ -35,7 +45,8 @@ export const UiIcon: React.FC<UiIconProps> = ({ icon, nbsp, className, size, spi
{React.createElement(icon, { {React.createElement(icon, {
className: finalClassName, className: finalClassName,
width: finalSize, width: finalSize,
height: finalSize height: finalSize,
title
})} })}
{nbsp ? <Fragment>&nbsp;</Fragment> : null} {nbsp ? <Fragment>&nbsp;</Fragment> : null}
</Fragment> </Fragment>