// import Tooltip from '@mui/material/Tooltip';
// import "react-tooltip/dist/react-tooltip.css";
import { Tooltip } from "react-tooltip";
const IconHtml = React.forwardRef(function IconHtml(props, ref){
const {name, color, size} = props;
const iconColors = {
'black': 'var(--rsp-black)',
'green': 'var(--rsp-green)',
'blue': 'var(--rsp-blue)',
'dark-blue': 'var(--rsp-dark-blue)',
'yellow': 'var(--rsp-yellow)',
'orange': 'var(--rsp-orange)',
'red': 'var(--rsp-red)',
'grey': 'var(--rsp-grey-400)',
};
let renderedIcon = '';
if (name === 'bullet') {
renderedIcon =
}
if (name === 'circle') {
renderedIcon =
}
if (name === 'check') {
renderedIcon =
}
if (name === 'eye-slash') {
renderedIcon =
}
if (name === 'eye') {
renderedIcon =
}
if (name === 'indeterminate') {
renderedIcon =
}
if (name === 'warning') {
renderedIcon =
}
if (name === 'error') {
renderedIcon =
}
if (name === 'times') {
renderedIcon =
}
if (name === 'success') {
renderedIcon =
}
if (name === 'circle-check') {
renderedIcon =
}
if (name === 'circle-times') {
renderedIcon =
}
if (name === 'chevron-up') {
renderedIcon =
}
if (name === 'chevron-down') {
renderedIcon = }
if (name === 'chevron-right') {
renderedIcon =
}
if (name === 'upload') {
renderedIcon =
}
if (name === 'circle-chevron-right') {
renderedIcon =
}
if (name === 'dial-high-light') {
renderedIcon =
}
if (name === 'dial-light') {
renderedIcon =
}
if (name === 'dial-low-light') {
renderedIcon =
}
if (name === 'dial-max-light') {
renderedIcon =
}
if (name === 'dial-med-light') {
renderedIcon =
}
if (name === 'dial-med-low-light') {
renderedIcon =
}
if (name === 'dial-min-light') {
renderedIcon =
}
if (name === 'dial-off-light') {
renderedIcon =
}
if (name === 'chevron-left') {
renderedIcon =
}
if (name === 'plus') {
renderedIcon =
}
if (name === 'minus') {
renderedIcon =
}
if (name === 'plugin') {
renderedIcon =
}
if (name === 'services') {
renderedIcon =
}
if (name === 'sync') {
renderedIcon =
}
if (name === 'sync-error') {
renderedIcon =
}
if (name === 'shortcode') {
renderedIcon =
}
if (name === 'file') {
renderedIcon =
}
if (name === 'file-disabled') {
renderedIcon =
}
if (name === 'file-download') {
renderedIcon =
}
if (name === 'calendar') {
renderedIcon =
}
if (name === 'calendar-error') {
renderedIcon =
}
if (name === 'rotate') {
renderedIcon =
}
if (name === 'rotate-error') {
renderedIcon =
}
if (name === 'help') {
renderedIcon =
}
if (name === 'copy') {
renderedIcon =
}
if (name === 'info') {
renderedIcon =
}
if (name === 'list') {
renderedIcon =
}
if (name === 'external-link') {
renderedIcon =
}
if (name === 'loading') {
renderedIcon =
}
if (name === 'linked') {
renderedIcon =
}
if (name === 'unlinked') {
renderedIcon =
}
return (
{renderedIcon}
)
});
const Icon = ({name, color, size, tooltip}) => {
// set defaults if not set
const iconName = name || 'bullet';
const iconColor = color || 'black';
let iconSize = size || 15;
//FormFileupoad component forces size=24. Override that here.
if (iconName === 'upload') {
iconSize = 15;
}
let tooltipClass = tooltip ? 'tooltip-' : '';
let randomId= Math.floor(Math.random() * 1000000000);
if ( tooltip ) {
return (
);
}
return (
);
}
export default Icon;