🖼️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:
import fooPngUrl from "./assets/foo.png";
// NOTE: fooPngUrl is a URL (string) that points to the asset.
// ...
<img src={fooPngUrl} />

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:
@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:
<!-- 🛑 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:
-<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>
Importing Default Keycloak Theme Resources
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.
Last updated
Was this helpful?