mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-24 18:56:32 -05:00
enhancement(icon): add title attribute for icons
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
parent
9030bbd454
commit
74b92f2bbb
1 changed files with 13 additions and 2 deletions
|
@ -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> </Fragment> : null}
|
{nbsp ? <Fragment> </Fragment> : null}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
Loading…
Reference in a new issue