🖼️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

This is not recommended, Keycloakify or not, whenever possible prefer importing your assets using the import statement. Learn more.

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

This is not recommended, Keycloakify or not, whenever possible prefer importing your assets using the import statement. Learn more.

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>

Example here (and the font are here).

Storybook: To have your font applied in your Storybook as well you need to import them as shown here.

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>

Example here (and the font are here).

Storybook: To have your font applied in your Storybook as well you need to import them as shown here.

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`;

You can see what assets are available under public/keycloak-resources/login/resources. If you want to choose which version of the assets to use, refer to this build option.

By default, the default CSS assets are imported and applied here in the login theme.

PreviousKeycloakify in my App NextEmail customization

Last updated 6 months ago

Was this helpful?