mirror of https://github.com/portainer/portainer
49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
|
import clsx from 'clsx';
|
||
|
|
import { ComponentType, ReactNode, useEffect } from 'react';
|
||
|
|
import featherIcons from 'feather-icons';
|
||
|
|
import { isValidElementType } from 'react-is';
|
||
|
|
|
||
|
|
export interface IconProps {
|
||
|
|
icon: ReactNode | ComponentType<unknown>;
|
||
|
|
featherIcon?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
icon: ReactNode | ComponentType<unknown>;
|
||
|
|
feather?: boolean;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Icon({ icon, feather, className }: Props) {
|
||
|
|
useEffect(() => {
|
||
|
|
if (feather) {
|
||
|
|
featherIcons.replace();
|
||
|
|
}
|
||
|
|
}, [feather]);
|
||
|
|
|
||
|
|
if (typeof icon !== 'string') {
|
||
|
|
const Icon = isValidElementType(icon) ? icon : null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className={className} aria-hidden="true" role="img">
|
||
|
|
{Icon == null ? <>{icon}</> : <Icon />}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (feather) {
|
||
|
|
return (
|
||
|
|
<i
|
||
|
|
data-feather={icon}
|
||
|
|
className={className}
|
||
|
|
aria-hidden="true"
|
||
|
|
role="img"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<i className={clsx('fa', icon, className)} aria-hidden="true" role="img" />
|
||
|
|
);
|
||
|
|
}
|