diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 0d88b1156..2ddd49b8f 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -111,42 +111,35 @@ export default function GenericNode({
const isEmoji = emojiRegex.test(data?.node?.icon!);
const iconNodeRender = useCallback(() => {
- if (data?.node?.icon) {
- if (isEmoji) {
- return {data.node.icon};
- } else {
- const iconName =
- data.node.icon || (data.node?.flow ? "group_components" : name);
- const iconClassName = `generic-node-icon ${
- !showNode ? "absolute inset-x-6 h-12 w-12" : ""
- }`;
- const iconColor = nodeColors[types[data.type]];
+ const iconElement = data?.node?.icon;
+ const iconColor = nodeColors[types[data.type]];
+ const iconName =
+ iconElement || (data.node?.flow ? "group_components" : name);
+ const iconClassName = `generic-node-icon ${
+ !showNode ? "absolute inset-x-6 h-12 w-12" : ""
+ }`;
- return (
-
- );
- }
+ if (iconElement && isEmoji) {
+ return nodeIconFragment(iconElement);
} else {
- const iconName = data.node?.flow ? "group_components" : name;
- const iconClassName = `generic-node-icon ${
- !showNode ? "absolute inset-x-6 h-12 w-12" : ""
- }`;
- const iconColor = nodeColors[types[data.type]];
-
- return (
-
- );
+ return checkNodeIconFragment(iconColor, iconName, iconClassName);
}
}, [data, isEmoji, name, showNode]);
+ const nodeIconFragment = (icon) => {
+ return {icon};
+ };
+
+ const checkNodeIconFragment = (iconColor, iconName, iconClassName) => {
+ return (
+
+ );
+ };
+
return (
<>