# Importing assets and fonts ## Importing Custom assets that aren't fonts {% tabs %} {% tab title="Using the `import` statement " %} For example, you can place `foo.png` in `src/login/assets` and import it in the template as shown below: {% code title="src/login/Template.tsx" lineNumbers="true" %} ```tsx import fooPngUrl from "./assets/foo.png"; // NOTE: fooPngUrl is a URL (string) that points to the asset. // ...

``` {% endcode %} {% embed url="" %} Demo in the Starter project {% endembed %}

{% endtab %} {% tab title="from public/ - Vite" %} 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**

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="/foo.png" />  
</head>

<body>
  <div id="root"></div>
</body>

</html>

The favicon is correctly loaded for the Keycloak server

**In your TypeScript files** {% hint style="warning" %} This is **not recommended**, Keycloakify or not, whenever possible prefer importing your assets using the `import` statement. [Learn more](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system). {% endhint %} {% code title="src/login/Template.tsx" %} ```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.

``` {% endcode %}

{% endtab %} {% tab title="from public/ - CRA (Webpack)" %} 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**

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="%PUBLIC_URL%/foo.png" />  
</head>

<body>
  <div id="root"></div>
</body>

</html>

{% embed url="" %} Example from the starter: Import favicon {% endembed %}

**In your TypeScript files** {% hint style="warning" %} This is **not recommended**, Keycloakify or not, whenever possible prefer importing your assets using the `import` statement. [Learn more](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system). {% endhint %} {% code title="src/login/Template.tsx" %} ```tsx // This is like process.env.PUBLIC_URL but it works both inside // and outside of Keycloak. import { PUBLIC_URL } from "keycloakify/PUBLIC_URL";

``` {% endcode %} {% embed url="" %} Example in the starter {% endembed %}

{% endtab %} {% endtabs %} ## Importing Fonts {% tabs %} {% tab title="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: {% code title="public/fonts.css" %} ```css @font-face { font-family: Marianne; src: url("./fonts/Marianne-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } ``` {% endcode %} You would import it like this: {% code title="public/index.html" %} ```html ``` {% endcode %} 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: {% code title="public/index.html" %} ```diff - + ``` {% endcode %} Example [here](https://github.com/garronej/keycloakify-demo-app/blob/9aa2dbaec28a7786d6b2983c9a59d393dec1b2d6/public/index.html#L27-L73) (and the font are [here](https://github.com/garronej/keycloakify-demo-app/tree/main/public/fonts/WorkSans)). {% hint style="info" %} **Storybook**: To have your font applied in your Storybook as well you need to import them as shown [here](https://github.com/keycloakify/keycloakify-starter/blob/20e45b981f4db907139ae8e3111be34f83abc9b6/src/keycloak-theme/login/createPageStory.tsx#L20-L21). {% endhint %} {% endtab %} {% tab title="Self hosted fonts - Webpack" %} 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: {% code title="public/fonts.css" %} ```css @font-face { font-family: Marianne; src: url("./fonts/Marianne-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } ``` {% endcode %} You would import it like this: {% code title="public/index.html" %} ```html ``` {% endcode %} 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: {% code title="public/index.html" %} ```diff - + ``` {% endcode %} Example [here](https://github.com/garronej/keycloakify-demo-app/blob/9aa2dbaec28a7786d6b2983c9a59d393dec1b2d6/public/index.html#L27-L73) (and the font are [here](https://github.com/garronej/keycloakify-demo-app/tree/main/public/fonts/WorkSans)). {% hint style="info" %} **Storybook**: To have your font applied in your Storybook as well you need to import them as shown [here](https://github.com/keycloakify/keycloakify-starter/blob/20e45b981f4db907139ae8e3111be34f83abc9b6/src/keycloak-theme/login/createPageStory.tsx#L20-L21). {% endhint %} {% endtab %} {% tab title="Using Google Font or other font provider" %} Works out of the box ✅ {% endtab %} {% endtabs %} ## Importing Default Keycloak Theme Resources {% hint style="info" %} 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. {% endhint %} To import resources available in the default theme, you can construct URLs like: ```tsx 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](/keycloakify/v9/build-options.md#loginthemeresourcesfromkeycloakversion). By default, the default CSS assets are imported and applied [here](https://github.com/keycloakify/keycloakify/blob/402c6fc64a26268b6f2f7222e4f11ff07de452f8/src/login/Template.tsx#L35-L38C19) in the login theme. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.keycloakify.dev/keycloakify/v9/importing-assets.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.