UI5 Web Components: SAP Fiori Tools icon set
npm install @ui5/webcomponents-icons-tnt
Provides assets for the rich tnt icon collection.
| Icon asset | Module import |
|--------------------------|------------------------------------------------------------------|
| All icons (~31KB zipped) | import "@ui5/webcomponents-icons-tnt/dist/AllIcons.js"; |
| Actor icon | import "@ui5/webcomponents-icons-tnt/dist/actor.js"; |
| Ad hoc actor icon | import "@ui5/webcomponents-icons-tnt/dist/ad-hoc-actor.js"; |
| ... | ... |
| Workflow editor icon | import "@ui5/webcomponents-icons-tnt/dist/workflow-editor.js"; |
Note: The @ui5/webcomponents-icons-tnt package does not provide any web components per se, but rather icon assets,
usable by other web components such as ui5-icon. You could import all icons, but it's recommended to import
just the ones that your app will actually use.
Note: For a full list of the icons in the tnt collection, click here.
tnt and a / separator when used by web components.Example usage with
``html`
The package provides two versions of each icon (TNT Icons v2 and TNT Icons v3).
If you don't specify the versioned collection name, like in the example above:
`html`
the framework will detect the current theme and render the corresponding icon - from TNT Icons v3 (collection name tnt-v3) for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and from TNT Icons v2 (collection name tnt-v2) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).
In case you want to always display the TNT Icons v3 icons in all themes, you can set it explicitly via the tnt-v3 collection name:
`html`
The same applies if you want to always display the TNT Icons v2 icons. You can set it explicitly via the tnt-v2 collection name:`html`