// IconsLib
import React from 'react';
import {
ML2_ICON_CLASS,
ROUNDED_ICON_CLASS,
STROKE_WHITE_ICON_CLASS,
VERTICAL_SLIDER_ICON_CLASS,
} from '../constants/class_name_constants.jsx';
const debug = false;
export const GsIcons = ({
icon,
size = null,
// width = null,
// height = null,
alt = '',
id = '',
className = '',
role = "img",
additionalIconsFn = null,
}) => {
/*
Some vector icons thanks to: https://www.svgrepo.com/
Warning: Failed prop type: Invalid prop `size` of value `m` supplied to `FontAwesomeIcon`,
expected one of ["2xs","xs","sm","lg","xl","2xl","1x","2x","3x","4x","5x","6x","7x","8x","9x","10x"].
Reference::
https://docs.fontawesome.com/web/style/size
Relative Sizing Class Font Size Equivalent in Pixels
fa-2xs 0.625em 10px
fa-xs 0.75em 12px
fa-sm 0.875em 14px
fa-lg 1.25em 20px
fa-xl 1.5em 24px
fa-2xl 2em 32px
Literal Sizing Class Font Size Equivalent in Pixels
fa-1x 1em 16px
fa-2x 2em 32px
fa-3x 3em 48px
fa-4x 4em 64px
fa-5x 5em 80px
fa-6x 6em 96px
fa-7x 7em 112px
fa-8x 8em 128px
fa-9x 9em 144px
fa-10x 10em 160px
*/
const sizeData = {
"2xs": {
"width": "10",
"height": "10",
},
"xs": {
"width": "12",
"height": "12",
},
"sm": {
"width": "14",
"height": "14",
},
"m": {
"width": "16",
"height": "16",
},
"2m": {
"width": "18",
"height": "18",
},
"lg": {
"width": "20",
"height": "20",
},
"xl": {
"width": "24",
"height": "24",
},
"2xl": {
"width": "32",
"height": "32",
},
"1x": {
"width": "16",
"height": "16",
},
"2x": {
"width": "32",
"height": "32",
},
"3x": {
"width": "48",
"height": "48",
},
"4x": {
"width": "64",
"height": "64",
},
"5x": {
"width": "80",
"height": "80",
},
"6x": {
"width": "96",
"height": "96",
},
"7x": {
"width": "112",
"height": "112",
},
"8x": {
"width": "128",
"height": "128",
},
"9x": {
"width": "14",
"height": "14",
},
"10x": {
"width": "160",
"height": "160",
},
}
size = (size ?? 'sm');
if (typeof sizeData[size] === "undefined") {
console.error(`Invalid "size" *${size}*. Must be: 2xs, xs, sm, lg, xl, 2xl, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, or 10x`)
return (
<>
{`Invalid "size" *${size}*`}
);
}
const currentWidth = (sizeData[size].width);
const currentHeight = (sizeData[size].height);
let selectedSvg = null;
switch (icon.toLowerCase()) {
case 'arrow-down-small':
selectedSvg = (
);
break;
case 'arrow-right-small':
selectedSvg = (
);
break;
case 'arrows-rotate':
selectedSvg = (
);
break;
case 'clip':
selectedSvg = (
);
break;
case 'edit':
selectedSvg = (
);
break;
case 'eye':
selectedSvg = (
);
break;
case 'google-logo':
selectedSvg = (
);
break;
case 'greater-than':
selectedSvg = (
);
break;
case 'less-than':
selectedSvg = (
);
break;
case 'menu-dots-more':
selectedSvg = (
);
break;
case "menu-hamburger":
selectedSvg = (
);
break;
case 'moon':
selectedSvg = (
);
break;
case 'place-holder-circle':
selectedSvg = (
);
break;
case 'plus':
selectedSvg = (
);
break;
case 'search':
selectedSvg = (
);
break;
case 'side-menu':
selectedSvg = (
);
break;
case 'spark':
selectedSvg = (
);
break;
case 'sun':
selectedSvg = (
);
break;
case 'trash':
selectedSvg = (
);
break;
case 'top-menu':
selectedSvg = (
);
break;
case 'vertical-slider':
selectedSvg = (
);
break;
case 'warning-sign':
selectedSvg = (
);
break;
case 'checked-sign':
selectedSvg = (
);
break;
case 'close':
case 'x':
selectedSvg = (
);
break;
case 'error':
selectedSvg = (
);
break;
default:
if (additionalIconsFn) {
selectedSvg = additionalIconsFn(
icon,
size,
currentWidth, // width,
currentHeight, // height,
alt,
id,
className,
role,
);
}
}
if (!selectedSvg) {
return (
<>
{`Invalid Icon *${icon}*`}
);
}
if (debug) console.log("selectedSvg # 1", selectedSvg, " | selectedSvg.type", selectedSvg.type, ' | icon:', icon);
let iconProps = {
'data-icon': icon.toLowerCase(),
'id': id,
'className': selectedSvg.props.className ?? className,
};
if (selectedSvg.type === "svg") {
// iconProps['viewBox'] = "0 0 " + currentWidth + " " + currentHeight;
iconProps['xmlns'] = selectedSvg.props.xmlns ?? "http://www.w3.org/2000/svg";
iconProps['width'] = selectedSvg.props.width ?? currentWidth;
iconProps['height'] = selectedSvg.props.height ?? currentHeight;
iconProps['role'] = selectedSvg.props.role ?? role;
iconProps['alt'] = selectedSvg.props.alt ?? alt;
iconProps['title'] = selectedSvg.props.title ?? alt;
if (debug) console.log("It's a SVG.... | iconProps", iconProps);
}
if (debug) console.log("selectedSvg # 2", selectedSvg);
selectedSvg = React.cloneElement(selectedSvg, iconProps);
if (debug) console.log("selectedSvg # 3", selectedSvg);
return selectedSvg;
}