Add placeholder for custom svg icon for SSR [prerelease]

mondaycom · Oct 10, 2024 · 33ea4f0 · 33ea4f0
1 parent 0f2c618
commit 33ea4f0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx b/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx
@@ -4,6 +4,7 @@ import useIconScreenReaderAccessProps from "../../../hooks/useIconScreenReaderAc
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { ComponentDefaultTestId } from "../../../tests/constants";
 import { getTestId } from "../../../tests/test-ids-utils";
+import { isServer } from "../../../utils/ssr-utils";
 
 function modifySvgCode(svg: string, color = "currentColor") {
   return svg.replace(/fill=".*?"/g, `fill="${color}"`);
@@ -55,6 +56,17 @@ const CustomSvgIcon: FunctionComponent<CustomSvgIconProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const SVGComponent = SVG as React.FC<any>;
 
+  if (isServer()) {
+    // placeholder for server side rendering
+    return (
+      <div>
+        src={src}
+        className={className}
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.SVG_ICON, id)}
+      </div>
+    );
+  }
   return (
     <SVGComponent
       innerRef={ref}

diff --git a/packages/core/src/components/Icon/Icon.tsx b/packages/core/src/components/Icon/Icon.tsx
@@ -38,7 +38,7 @@ export interface IconProps extends VibeComponentProps {
    */
   clickable?: boolean;
   /**
-mo   * Icon aria label [aria label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+   * Icon aria label [aria label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
    */
   iconLabel?: string;
   /**

diff --git a/packages/core/src/utils/ssr-utils.ts b/packages/core/src/utils/ssr-utils.ts
@@ -1 +1,2 @@
 export const isClient = () => typeof window !== "undefined";
+export const isServer = () => !isClient();
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const isClient = () => typeof window !== "undefined";
		export const isServer = () => !isClient();