🖼️Importing assets and fonts

Importing Custom assets that aren't fonts

Using the `import` statement

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} />

Demo how to import image in React · keycloakify/keycloakify-starter@c3e7067GitHub

Demo in the Starter project

Keycloakify correctly replaces the URLs

from public/ - Vite

from public/ - CRA (Webpack)

Importing Fonts

Self hosted fonts - Vite

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.

Self hosted fonts - Webpack

Using Google Font or other font provider

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.