Ctrlk
GitHubStorybookStarter projectKeycloak hosting
For the complete documentation index, see llms.txt. This page is also available as Markdown.

🖼️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} />
LogoDemo how to import image in React · keycloakify/keycloakify-starter@c3e7067GitHub
Demo in the Starter project
Keycloakify correctly replaces the URLs

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

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.

The asset is successfully downloaded

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

Logokeycloakify-starter/public/index.html at d28c986686c3255b812152f68f3458995fa8bfb7 · keycloakify/keycloakify-starterGitHub
Example from the starter: Import favicon
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.

LogoShow how to import from public/ · keycloakify/keycloakify-starter@7a35896GitHub
Example in the starter
The asset is successfully downloaded

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:

You would import it like this:

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:

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:

You would import it like this:

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:

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:

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

Was this helpful?