Show how to import from public/

public/index.html

@@ -5,6 +5,9 @@
   <meta charset="utf-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/PUBLIC_URL.ts

@@ -0,0 +1,31 @@
+
+import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext";
+import { kcContext as kcAccountThemeContext } from "keycloak-theme/login/kcContext";
+
+/**
+ * If you need to use process.env.PUBLIC_URL, use this variable instead.  
+ * If you can, import your assets using the import statement.
+ * 
+ * See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets
+ */
+export const PUBLIC_URL = (()=>{
+
+    const kcContext = (()=>{
+
+        if( kcLoginThemeContext !== undefined ){
+            return kcLoginThemeContext;
+        }
+
+        if( kcAccountThemeContext !== undefined ){
+            return kcLoginThemeContext
+        }
+
+        return undefined;
+
+    })();
+
+    return (kcContext === undefined || process.env.NODE_ENV === "development")
+        ? process.env.PUBLIC_URL
+        : `${kcContext.url.resourcesPath}/build`;
+
+})();

src/keycloak-theme/login/Template.tsx

@@ -9,6 +9,7 @@ import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "./kcContext";
 import type { I18n } from "./i18n";
 import keycloakifyLogoPngUrl from "./assets/keycloakify-logo.png";
+import { PUBLIC_URL } from "../../PUBLIC_URL";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
@@ -59,7 +60,13 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     className={getClassName("kcHeaderWrapperClass")}
                     style={{ "fontFamily": '"Work Sans"' }}
                 >
+                    {/* 
+                        This is just to show you how it can be done but this is not the best option for importing assets.
+                        See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets
+                    */}
+                    <img src={`${PUBLIC_URL}/keycloakify-logo.png`} alt="Keycloakify logo" width={50} />
                     {msg("loginTitleHtml", realm.displayNameHtml)}!!!
+                    {/* This is the preferred way to use assets */}
                     <img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} />
                 </div>
             </div>