The SDX package also includes additional assets, which can be found in the /images directory.
Logo
There are multiple formats provided for the Lifeform: PNG, SVG and ico. The lettering is named swisscom-logo-type.svg.
Favicon
The href path of this example demonstrates the NPM usage. For CDN usage please see the VanillaJS example.
<head>
<!-- .ico as a fallback for old browsers -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" sizes="32x32">
<!-- .svg for every modern browser except Safari -->
<link rel="icon" href="images/svg/swisscom-logo-lifeform.svg" type="image/svg+xml">
<!-- .png with 180x180px dimensions for iOS home screen shortcuts -->
<link rel="apple-touch-icon" href="images/swisscom-logo-lifeform-180x180.png">
</head>
Country Flags
Images from country flags are available to use under the /images/country-flags directory. For more information about the flag files, see Flagpedia. Avoid copying these files to your repository, copy them automatically during your build.
<img src="images/country-flags/ch.webp" alt="Flag of Switzerland" />
Component related
All these assets are located in /js/webcomponents/webcomponents/assets. E.g. the Swisscom Lifeform which is used by the sdx-header. We are using Stencil's getAssetPath to resolve the path at runtime. Make sure that the content of the mentioned folder is served by your web server on root level in /assets.
To set a custom base path for the assets, you can use Stencil's setAssetPath:
// @ts-ignore
import { setAssetPath } from '@swisscom/sdx/dist/js/webcomponents/esm';
// @ts-ignore because type definition is wrong, return type is `Promise<void>`
defineCustomElements().then(() => setAssetPath(
`${window.location.protocol}//assets.${window.location.host}/`
));