Web Components
Library installation
Install @siemens/ix
and @siemens/ix-icons
using a package manager:
- NPM
- Yarn
- PNPM
npm install @siemens/ix @siemens/ix-icons
yarn add @siemens/ix @siemens/ix-icons
pnpm add @siemens/ix @siemens/ix-icons
Build
There are several different possibilities to build and serve web apps with the library. In the following section we will describe how you can build an application with vite.
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div>
<ix-button class="m-1" variant="primary">Button</ix-button>
<ix-button class="m-1" variant="primary" disabled>Button</ix-button>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>
main.js
import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
import { defineCustomElements } from '@siemens/ix/loader';
import { defineCustomElements as defineIxIconCustomElement } from '@siemens/ix-icons/loader';
(async () => {
defineIxIconCustomElement();
defineCustomElements();
})();
Prevent @siemens/ix-icons
to be defined during library load
This can be useful if you have configured CSP nonce, because of the lazy bootstrap behavior of the components.
To prevent the definition of the ix-icon
component during library setup, add the following <meta>
HTML element to your application:
<meta name="ix:legacy-icons" content="false" />