Using custom assets in UI Components

When using custom fonts or images in your UI component, some logic should be implemented to load these correctly. This is necessary to maintain the desired styling and visual appeal consistent with your design guidelines. You may encounter issues with asset declarations within the Shadow DOM or scoped styles, leading to inconsistent behavior.

The cdk.config.json file allows you to specify assets that should be included in the build process. This enables the dynamic loading of fonts and proper referencing of images in your components.

Configuring cdk.config.json

To include your custom assets, update your cdk.config.json file:

 {  
   "my-component": {  
     "runner": {  
       "build": {  
         "builder": "@ixon-cdk/static-builder:browser",  
         "input": "my-component.js",  
+        "assets": ["assets/**"]  
       }  
     }  
   }  
 }

Example: Using Custom Fonts and Images in a Component

Define your custom font in a CSS file, dynamically load it in your Vue component by injecting it into the <head> tag, and ensure your images are correctly referenced.

Define Your Custom Font: Save this in [your component folder]/assets/my-font.css

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Add your images: Save your images in [your component folder]/assets
Load the Custom Font and Image in Your Component: Use the following Vue component file (e.g., my-component.vue).

<template>
  <div class="card">
    <div class="logo">
      <img :src="imageUrl" alt="Example Image" />
    </div>
    <h1>This works!</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'example',
  props: {
    context: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      imageUrl: '',
    };
  },
  mounted() {
    this.loadCustomFont();
    this.imageUrl = this.context.componentBaseUrl + 'assets/example-image.png';
  },
  methods: {
    loadCustomFont() {
      if (!document.querySelector('link[data-font="my-font"]')) {
        const link = document.createElement('link');
        link.href = this.context.componentBaseUrl + 'assets/my-font.css';
        link.rel = 'stylesheet';
        link.setAttribute('data-font', 'my-font');
        document.head.appendChild(link);
      }
    },
  },
});
</script>

<style lang="scss">
.card {
  font-family: 'MyWebFont', sans-serif;
}
img {
  max-width: 100%;
  height: 50px;
}
</style>

By configuring your cdk.config.json file to include custom assets and dynamically loading custom fonts and properly referencing images, you ensure they are correctly applied within your custom UI Components. This approach helps avoid issues related to the Shadow DOM and maintains the desired functionality and styling consistent with your design guidelines.