ic-design-system icon indicating copy to clipboard operation
ic-design-system copied to clipboard

Add guidance on how to load web-components from CDN

Open ad9242 opened this issue 2 years ago • 1 comments

It is possible to use the web-components when loading from a CDN. Examples should be added to the site.

May need to review the structure of the Get the components > Web components page to add this

The following are examples (copy the code into a file called "index.html" & open in a browser to test):

Using jsdelivr:

<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ukic/web-components/dist/core/core.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@ukic/web-components/dist/core/core.css" />
    <script>function clickhandler(){alert("hello")}</script>
  </head>
  <body>
    <ic-button onclick="clickhandler()">
      button
    </ic-button>
  </body>
</html>

using unpkg:

<html>
  <head>
    <script type="module" src="https://unpkg.com/@ukic/web-components/dist/core/core.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@ukic/web-components/dist/core/core.css" />
    <script>function clickhandler(){alert("hello")}</script>
  </head>
  <body>
    <ic-button onclick="clickhandler()">
      button
    </ic-button>
  </body>
</html>

NOTE: may want to use ic-status-tag on site examples to be consistent with other examples

Should also add an example of how to target a particular version of the components (the above will always pull in the latest release)

ad9242 avatar Jan 11 '24 16:01 ad9242

consider adding canary web components too

ad9242 avatar Aug 27 '25 07:08 ad9242