fix: cross domain SVG sprites (#16244)

apps/web/app/layout.tsx

@@ -5,6 +5,7 @@ import { headers, cookies } from "next/headers";
 import React from "react";
 
 import { getLocale } from "@calcom/features/auth/lib/getLocale";
+import { IconSprites } from "@calcom/ui";
 
 import { prepareRootMetadata } from "@lib/metadata";
 
@@ -83,6 +84,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             --font-cal: ${calFont.style.fontFamily.replace(/\'/g, "")};
           }
         `}</style>
+        <IconSprites />
       </head>
       <body
         className="dark:bg-darkgray-50 bg-subtle antialiased"

apps/web/components/PageWrapper.tsx

@@ -8,6 +8,7 @@ import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";
+import { IconSprites } from "@calcom/ui";
 
 import type { AppProps } from "@lib/app-providers";
 import AppProviders from "@lib/app-providers";
@@ -85,6 +86,7 @@ function PageWrapper(props: AppProps) {
           --font-cal: ${calFont.style.fontFamily};
         }
       `}</style>
+      <IconSprites />
 
       {getLayout(
         Component.requiresLicense ? (

apps/web/lib/app-providers-app-dir.tsx

@@ -10,6 +10,7 @@ import type { AppProps as NextAppProps } from "next/app";
 import type { ReadonlyURLSearchParams } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { useEffect, type ReactNode } from "react";
+import CacheProvider from "react-inlinesvg/provider";
 
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
@@ -273,7 +274,10 @@ const AppProviders = (props: PageWrapperProps) => {
                 isBookingPage={props.isBookingPage || isBookingPage}>
                 <FeatureFlagsProvider>
                   <OrgBrandProvider>
-                    <MetaProvider>{props.children}</MetaProvider>
+                    {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
+                    <CacheProvider>
+                      <MetaProvider>{props.children}</MetaProvider>
+                    </CacheProvider>
                   </OrgBrandProvider>
                 </FeatureFlagsProvider>
               </CalcomThemeProvider>

apps/web/lib/app-providers.tsx

@@ -10,6 +10,7 @@ import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/
 import type { ParsedUrlQuery } from "querystring";
 import type { PropsWithChildren, ReactNode } from "react";
 import { useEffect } from "react";
+import CacheProvider from "react-inlinesvg/provider";
 
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
@@ -299,7 +300,10 @@ const AppProviders = (props: AppPropsWithChildren) => {
               router={props.router}>
               <FeatureFlagsProvider>
                 <OrgBrandProvider>
-                  <MetaProvider>{props.children}</MetaProvider>
+                  {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
+                  <CacheProvider>
+                    <MetaProvider>{props.children}</MetaProvider>
+                  </CacheProvider>
                 </OrgBrandProvider>
               </FeatureFlagsProvider>
             </CalcomThemeProvider>

packages/platform/atoms/cal-provider/BaseCalProvider.tsx

@@ -2,6 +2,7 @@ import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { useState } from "react";
 import { useCallback } from "react";
 
+import { IconSprites } from "@calcom/ui";
 import deTranslations from "@calcom/web/public/static/locales/de/common.json";
 import enTranslations from "@calcom/web/public/static/locales/en/common.json";
 import esTranslations from "@calcom/web/public/static/locales/es/common.json";
@@ -124,6 +125,7 @@ export function BaseCalProvider({
       }}>
       <TooltipProvider>{children}</TooltipProvider>
       <Toaster />
+      <IconSprites />
     </AtomsContext.Provider>
   ) : (
     <AtomsContext.Provider
@@ -142,6 +144,7 @@ export function BaseCalProvider({
       <>
         <TooltipProvider>{children}</TooltipProvider>
         <Toaster />
+        <IconSprites />
       </>
     </AtomsContext.Provider>
   );

packages/ui/components/icon/Icon.tsx

@@ -12,7 +12,7 @@ function Icon({
 }) {
   return (
     <svg height={size} width={size} {...props} aria-hidden>
-      <use href={`/icons/sprite.svg#${name}`} />
+      <use href={`#${name}`} />
     </svg>
   );
 }

packages/ui/components/icon/IconSprites.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import SVG from "react-inlinesvg";
+
+export function IconSprites() {
+  return (
+    <SVG
+      src={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/icons/sprite.svg?v=${process.env.NEXT_PUBLIC_CALCOM_VERSION}`}
+    />
+  );
+}
+
+export default IconSprites;

packages/ui/index.tsx

@@ -203,3 +203,4 @@ export type { OrgBannerProps } from "./components/organization-banner";
 export { StorybookTrpcProvider } from "./components/mocks/trpc";
 export { default as Icon } from "./components/icon/Icon";
 export type { IconName } from "./components/icon/icon-names";
+export { IconSprites } from "./components/icon/IconSprites";

packages/ui/package.json

@@ -48,6 +48,7 @@
     "react-colorful": "^5.6.0",
     "react-day-picker": "^8.10.1",
     "react-hook-form": "^7.43.3",
+    "react-inlinesvg": "^4.1.3",
     "react-select": "^5.7.0",
     "react-virtual": "^2.10.4"
   },

yarn.lock

@@ -4867,6 +4867,7 @@ __metadata:
     react-colorful: ^5.6.0
     react-day-picker: ^8.10.1
     react-hook-form: ^7.43.3
+    react-inlinesvg: ^4.1.3
     react-select: ^5.7.0
     react-virtual: ^2.10.4
     typescript: ^4.9.4
@@ -35715,6 +35716,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-from-dom@npm:^0.7.2":
+  version: 0.7.3
+  resolution: "react-from-dom@npm:0.7.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: c2dd74dbdae570ce3ce2f7466643ac8e27de2511cb73cb3027fdfc572bed7bb058e1c459ffb32d02e2c41e4c21b0ca490d0dc861f30452fe3689d2e938ad7277
+  languageName: node
+  linkType: hard
+
 "react-hook-form@npm:^7.43.3":
   version: 7.43.3
   resolution: "react-hook-form@npm:7.43.3"
@@ -35776,6 +35786,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-inlinesvg@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "react-inlinesvg@npm:4.1.3"
+  dependencies:
+    react-from-dom: ^0.7.2
+  peerDependencies:
+    react: 16.8 - 18
+  checksum: c8b3f670188b645f03172ca89c653435cf41d99123791694e7525a5a2531a0bde4451735afe4e82a7188d8f90a362cb55f49bf8160cd77cd4fd5b1c78aa0f324
+  languageName: node
+  linkType: hard
+
 "react-inspector@npm:^5.1.1":
   version: 5.1.1
   resolution: "react-inspector@npm:5.1.1"