• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
Guides Component assets
(external link)

Component assets #

Some components (e.g. ld-icon) require static assets during runtime.

By default, Liquid Oxygen components will fetch these assets via jsDelivr. JsDelivr is a free CDN for open source projects. However, as we cannot guarantee the availability and performance of this CDN, we recommend bundling the assets with your application.

Copy the assets from the Liquid Oxygen package to your application. We recommend including copying these assets in your build process, which ensures that the assets are always up to date.

You should add the copied assets (e.g. public/liquid/assets/*) to your .gitignore file.

For the following example, we assume you are using Vite. By default, Vite uses the public folder for static assets. To include the Liquid Oxygen assets in your output bundle, you can copy them to this folder.

First, install the rollup-plugin-copy plugin. This plugin allows you to copy files and folders while building.

npm install rollup-plugin-copy -D

Now include the copy plugin in your Vite config. Add the following code to your vite.config.ts file. This will copy the Liquid Oxygen assets from the 'node_modules' folder to the 'public' folder, so Vite will bundle them.

// vite.config.ts
import { defineConfig } from 'vite'
import copy from 'rollup-plugin-copy'

export default defineConfig({
plugins: [
copy({
targets: [
{
src: 'node_modules/@emdgroup-liquid/liquid/dist/liquid/assets/*',
dest: 'public/liquid/assets',
},
],
hook: 'buildStart',
}),
// ...other plugins e.g. react()
],
// ...other config options
})

You need to "tell" Liquid Oxygen where to find the assets. The components will look for the __LD_ASSET_PATH__ variable in the window object. The path should point to the liquid/ folder.

You have 2 options:

  1. Specify the asset path using a metadata element in the document head section:
<!-- index.html -->
<meta data-ld-asset-path="/" />
  1. Specify the asset path by setting the __LD_ASSET_PATH__ variable on the window object:
// main.tsx
// if-clause only required in server-side rendering context
if (typeof window !== 'undefined') {
window.__LD_ASSET_PATH__ = window.location.origin
}

Once the asset path is set and the assets are available on runtime, all components can automatically load their assets.

If this example does not suit your environment, please refer to our sandbox apps for more details and alternative bundlers:

  • Liquid + React + Vite
    This sandbox is quite similar to the example above.
  • Liquid + React + CRA
    The Sandbox uses Create React App which does not allow to adjust the Webpack config. In this case we added a postinstall script to copy the assets to the public folder.
  • Liquid + React + Next.js
    Next.js uses Webpack under the hood. The sandbox shows how to add a custom Webpack config next.config.js to copy the assets to the public folder.