Links
🖼

Importing assets and fonts

Importing Custom assets that aren't fonts

Using the `import` statement
from public/ - Vite
from public/ - CRA (Webpack)
For example, you can place foo.png in src/login/assets and import it in the template as shown below:
src/login/Template.tsx
1
import fooPngUrl from "./assets/foo.png";
2
// NOTE: fooPngUrl is a URL (string) that points to the asset.
3
4
// ...
5
6
<img src={fooPngUrl} />
Keycloakify corectly replaces the URLs
This is how you would relyably 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="%BASE_URL%/foo.png" />
</head>
<body>
<div id="root"></div>
</body>
</html>
The favicon is correctly loaded for the Keycloak server

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`} />
The asset is successfuly downloaded
This is how you would relyably 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>
The favicon is correctly loaded for the Keycloak server

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`} />
The asset is successfuly downloaded

Importing Fonts

Selft hosted fonts - Vite
Selft hosted fonts - Webpack
Using Google Font or other font provider
So, this is typically how you would import self hosted font in a Regular React App. Let's immagine you have the folloing 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="%BASE_URL%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="%BASE_URL%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 immagine you have the folloing 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.
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="%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.
Works out of the box ✅

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.