A lightweight library for displaying app icons as custom elements. This package provides flexible imports, allowing you to include only what you need to optimize your project.
Install the library via npm:
npm i @odx/app-icons
The library provides a custom custom element <odx-app-icon>
to display app icons.
We rely on the esm module behavior in order to keep a global state. If you load an asset from a CDN ensure that the same module of @odx/assets-utils is used throughout your application. One common technique is the usage of an import map (
<script type="importmap">
).
import '@odx/app-icons';
To optimize your bundle, you can import only the specific app icon set you need:
// All app icon sets
import '@odx/app-icons/all';
// Core app icons
import '@odx/app-icons/core';
To optimize your bundle, you can import only the specific app icons you need:
import '@odx/app-icons/core/smt';
-
name: string -
<set-name>::<name>
or<name>
with default set (core) -
set: string -
<set-name>
<script type="module">
import '@odx/app-icons/core';
</script>
<odx-app-icon name="smt" set="core"></odx-app-icon>
<script src="https://esm.sh/@odx/app-icons" type="module"></script>
<script src="https://esm.sh/@odx/app-icons/<set-name>" type="module"></script>
// Import the core app icon set
import '@odx/app-icons/core';
// Create a app icon dynamically
const appIcon = document.createElement('odx-app-icon');
appIcon.name='core::smt'
document.body.appendChild(appIcon);
import loadAppIcons from '@odx/app-icons/loader';
/*
interface AssetLoaderOptions {
cdn?: string; // default: 'https://esm.sh'
loadCustomElement?: boolean; // default: false
loadMetadata?: boolean; // default: false
}
*/
loadAppIcons('<set-name>', options);
This library leverages modern web technologies such as Shadow DOM for encapsulation and CSSStyleSheet.replaceSync() for efficient stylesheet updates. It targets the ES2022 specification, taking advantage of the latest JavaScript features. These technologies are widely supported in most modern browsers.
- Chrome 97+
- Edge 97+
- Firefox 104+
- Safari 14+
- Opera 83+
For a overview of all available assets please refer to our Asset Viewer.