# 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](https://docs.keycloakify.dev/keycloakify/v9/build-options#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.