Icon

shadow

This component provides a simple way to display icons from a set of SVG images, while allowing various customization options. WebJET Elements uses the Tabler icon set. For a list of all available icons, see tabler-icons.io.

Basic usage

The sample shows the use of the icon in its simplest form, i.e. as a standalone visual element with a default name.

Style Outline / Filled

The sample compares outline and filled variants of the same icon to make it easier to select the appropriate style for a particular context.

Custom

The demonstration focuses on using a custom icon outside of the default set, which is useful for brand or project icons.

When to use

Use wje-icon to display content that improves the readability, scannability, or context of the information.

When not to use

Do not use it as a substitute for structured data where precise interaction is needed.

Accessibility

Add alternative text for images, legible contrasts and text equivalents for icons without description.

Recommended practices

• Compress media and use lazy loading for large lists.
• Keep information priorities consistent for tabs and lists.
• Do not repeat the same information in text and icon at the same time with no added value.

Attributes and properties

filled

Popis	Riadi správanie voľby filled v komponente.
Atribút	filled
Typ	any
Predvolené	-

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	any
Predvolené	-

name

Popis	Nastavuje názov poľa pri odoslaní formulára.
Atribút	name
Typ	any
Predvolené	-

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Názov	Popis
svg	Štýluje shadow časť svg.

CSS custom variables

Názov	Popis
--wje-icon-size	Vlastná CSS premenná na štýlovanie komponentu (size).
--wje-icon-width	Vlastná CSS premenná, ktorá riadi width.
--wje-icon-height	Vlastná CSS premenná, ktorá riadi height.

Slots

Pre tento komponent nie sú dostupné žiadne sloty.