Importing assets and fonts

Importing Custom assets that aren't fonts

For example, you can place foo.png in src/login/assets and import it in the template as shown below:

src/login/Template.tsx

import fooPngUrl from "./assets/foo.png";
// NOTE: fooPngUrl is a URL (string) that points to the asset.

// ...

<img src={fooPngUrl} />

This is how you would reliably import assets that you have in your public directory regardless of if you are in a Keycloak context or not.

Let's assume you have foo.png in the public/ directory. To import it you would do.

In you public/index.html file

public/index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="/foo.png" />  
</head>

<body>
  <div id="root"></div>
</body>

</html>

In your TypeScript files

src/login/Template.tsx

// Note: Base url is often just "/" but please use the BASE_URL env
// as it enable Keycloakify to resolve your assets when in Keycloak.   
<img src={`${import.meta.env.BASE_URL}foo.png`} />

This is how you would reliably import assets that you have in your public directory regardless of if you are in a Keycloak context or not.

Let's assume you have foo.png in the public/ directory. To import it you would do.

In you public/index.html file

public/index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="%PUBLIC_URL%/foo.png" />  
</head>

<body>
  <div id="root"></div>
</body>

</html>

In your TypeScript files

src/login/Template.tsx

// This is like process.env.PUBLIC_URL but it works both inside
// and outside of Keycloak.  
import { PUBLIC_URL } from "keycloakify/PUBLIC_URL";

<img src={`${PUBLIC_URL}/foo.png`} />

Importing Fonts

So, this is typically how you would import self hosted font in a Regular React App. Let's imagine you have the following font index CSS file:

public/fonts.css

@font-face {
  font-family: Marianne;
  src: url("./fonts/Marianne-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

You would import it like this:

public/index.html

<!-- 🛑 This do not work in keycloakfy --> 
<link rel="stylesheet" href="/font.css" />

Unfortunately this approach does not work in Keycloakify.

The workaround consist in including all your @font-face statements directly in your public/index.html file. This is how you would update your index.html file in order to make it work with Keycloakify:

public/index.html

-<link rel="stylesheet" href="/font.css" />
+<style>
+ @font-face {
+   font-family: Marianne;
+   src: url("%BASE_URL%fonts/Marianne-Light.woff2") format("woff2");
+   font-weight: 300;
+   font-style: normal;
+   font-display: swap;
+ }
+</style>

So, this is typically how you would import self hosted font in a Regular React App. Let's imagine you have the following font index CSS file:

public/fonts.css

@font-face {
  font-family: Marianne;
  src: url("./fonts/Marianne-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

You would import it like this:

public/index.html

<!-- 🛑 This do not work in keycloakfy --> 
<link rel="stylesheet" href="%PUBLIC_URL%/font.css" />

Unfortunately this approach does not work in Keycloakify.

public/index.html

-<link rel="stylesheet" href="%PUBLIC_URL%/font.css" />
+<style>
+ @font-face {
+   font-family: Marianne;
+   src: url("%PUBLIC_URL%/fonts/Marianne-Light.woff2") format("woff2");
+   font-weight: 300;
+   font-style: normal;
+   font-display: swap;
+ }
+</style>

Importing Default Keycloak Theme Resources

This section is mainly for transparency. You should use your own assets instead of importing the default ones; that's the whole point of creating a custom theme.

To import resources available in the default theme, you can construct URLs like:

const patternflyUrl = `${kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`;
const loginCssUrl = `${url.resourcesPath}/css/login.css`;

PreviousKeycloakify in my App NextEmail customization

Last updated 27 days ago

Was this helpful?