Skip to content

Instantly share code, notes, and snippets.

@nnaydenow

nnaydenow/index.html

Created September 24, 2025 07:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nnaydenow/926a83113aee21a882be7b392bd65f77 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nnaydenow/926a83113aee21a882be7b392bd65f77 to your computer and use it in GitHub Desktop.
Download ZIP
ui5 web components playground example
Raw
index.html
<!-- playground-fold -->
<!DOCTYPE html>
<head>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
<style>
*:not(:defined) {
display: none;
}
html {
forced-color-adjust: none;
}
</style>
</head>
<body style="background-color: var(--sapBackgroundColor); color: var(--sapTextColor);">
<!-- playground-fold-end -->
<ui5-icon style="width:20rem;height:20rem;color:#0a6ed1" name="my-custom-icons/cloud_erp"></ui5-icon>
<ui5-icon style="width:20rem;height:20rem;color:#d40012" name="my-custom-icons/cloud_erp"></ui5-icon>
<ui5-icon style="width:20rem;height:20rem;color:#07921e" name="my-custom-icons/cloud_erp"></ui5-icon>
<!-- playground-fold -->
<script type="module" src="main.js"></script>
</body>
<!-- playground-fold-end -->
Raw
main.tsx
import "@ui5/webcomponents/dist/Icon.js"import "./playground-support.js";
import { unsafeRegisterIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
unsafeRegisterIcon("cloud_erp", {
collection: "my-custom-icons",
customTemplateAsString: `<svg role="img" aria-hidden="false" focusable="false" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.8166 24.1561C36.8183 26.6855 39.9388 29.1891 42.4981 28.7902C42.597 28.2459 42.6486 27.6853 42.6486 27.1125C42.6486 22.1386 38.7627 18.0731 33.8633 17.7891C34.1572 18.4209 34.3916 19.0861 34.5584 19.7789C34.7567 20.6016 35.1191 22.3955 35.8161 24.1561H35.8166Z" fill="url(#paint0_radial_3127_70526)"></path>
<path d="M42.4982 28.7908C41.7716 32.7986 38.4895 35.9589 34.402 36.4333C34.1343 36.4586 33.8596 36.43 33.5774 36.4333C32.789 36.4431 31.9973 36.4727 31.2079 36.4333C21.9998 35.9748 13.0996 32.0345 13.0996 22.3956C13.0996 21.8838 13.1357 21.3803 13.2041 20.8872C13.207 20.8675 13.2098 20.8478 13.2126 20.8277C13.9926 15.5762 18.5165 11.5469 23.9821 11.5469C28.333 11.5469 32.0849 14.1002 33.8291 17.7873C33.8404 17.7878 33.8521 17.7887 33.8634 17.7897C34.1573 18.4211 34.3916 19.0867 34.5585 19.7791C34.7568 20.6017 35.1191 22.3956 35.8166 24.1567C36.8184 26.6856 39.9388 29.1897 42.4982 28.7908Z" fill="url(#paint1_radial_3127_70526)"></path>
<path d="M31.3897 36.4328C31.3897 36.4328 31.3067 36.4534 31.2087 36.4328C30.0894 36.1952 24.2938 34.9562 22.6348 29.3791C21.0594 24.0827 17.4547 20.8956 13.205 20.852C13.1881 20.852 13.1717 20.8516 13.1548 20.8516H13.0939C13.032 20.8516 12.9706 20.8525 12.9092 20.8539C8.71672 20.9636 5.35156 24.4009 5.35156 28.6248C5.35156 32.8488 8.82781 36.4333 13.1159 36.4333H31.3892L31.3897 36.4328Z" fill="url(#paint2_radial_3127_70526)"></path>
<defs>
<radialGradient id="paint0_radial_3127_70526" cx="0" cy="0" r="1" gradientTransform="matrix(-7.66406 4.75781 -0.377252 -17.9911 42.6559 19.5228)" gradientUnits="userSpaceOnUse">
<stop stop-color="hsl(from currentColor h s calc(l - 22))"></stop>
<stop offset="1" stop-color="hsl(from currentColor h s calc(l - 13.2))"></stop>
</radialGradient>
<radialGradient id="paint1_radial_3127_70526" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.1091 28.1719) rotate(-19.4894) scale(24.1659 31.3399)">
<stop stop-color="hsl(from currentColor h s calc(l - 4.4))"></stop>
<stop offset="1" stop-color="hsl(from currentColor h s calc(l + 4.4))"></stop>
</radialGradient>
<radialGradient id="paint2_radial_3127_70526" cx="0" cy="0" r="1" gradientTransform="matrix(48.4629 2.75826 -22.1824 62.3443 7.71739 24.8507)" gradientUnits="userSpaceOnUse">
<stop stop-color="hsl(from currentColor h s calc(l + 13.2))"></stop>
<stop offset="1" stop-color="hsl(from currentColor h s calc(l + 22))"></stop>
</radialGradient>
</defs>
</svg>`,
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment