lux‐icon v18 - IHK-GfI/lux-components GitHub Wiki
- LUX-Icon
| Name | Beschreibung |
|---|---|
| import | LuxIconModule |
| selector | lux-icon |
| Name | Typ | Beschreibung |
|---|---|---|
| luxIconName | string | Ein Iconname, z.B. "lux-battery-full-1". |
| luxIconSize | string | Definiert die Größe des Icons und entspricht einem 'em'-Wert (z.B. '1x' = 'font-size: 1em'). Passt dann die Größe passend zu dem Icon an. Default-Wert: '1x'. Mögliche Eingaben: '1x' bis '5x'. Zusätzlich können auch individuelle Pixelwerte oder em-Werte mit einem Dezimalwert angeben werden, z.B. '42px' oder '1.25em' |
| luxRounded | boolean | Definiert ob das Icon mit abgerundeten Hintergrund dargestellt werden soll. (Nur sichtbar wenn eine Farbe gesetzt ist). |
| luxColor | LuxIconColor | Bestimmt die Hintergrundfarbe und davon abhängig die Schriftfarbe des Icons (analog zu den LuxBadges). |
| luxMargin | string | Ermöglicht das Einstellen von Margins nach Oben, Rechts, Unten und Links. Die Syntax entspricht genau der normalen CSS-Syntax. Beispiele: luxMargin='5px', luxMargin='5px 10px', luxMargin='5px 10px 15px 20px' |
| luxPadding | string | Ermöglicht das Einstellen von Paddings nach Oben, Rechts, Unten und Links. Die Syntax entspricht genau der normalen CSS-Syntax. Beispiele: luxPadding='5px', luxPadding='5px 10px', luxPadding='5px 10px 15px 20px'. Wichtig: bei Runden Icons mit individueller Größe, muss das Padding selbständig angepasst werden, damit das Icon vollständig angezeigt wird. |
Grundlegende Regeln zum Umgang mit Icons sind:
- Die Icons sollen innerhalb einer App einheitlich eingerückt sein.
Siehe LUX-Components-Config.
Siehe LUX-Components-Config.
Html
<lux-icon
luxIconName="lux-interface-favorite-like-1"
class="lux-color-blue"
></lux-icon>
Html
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="blue"
></lux-icon>
Html
<lux-icon luxIconName="lux-interface-edit-write-2" luxIconSize="1x"></lux-icon>
<lux-icon luxIconName="lux-interface-edit-write-2" luxIconSize="2x"></lux-icon>
<lux-icon luxIconName="lux-interface-edit-write-2" luxIconSize="3x"></lux-icon>
<lux-icon luxIconName="lux-interface-edit-write-2" luxIconSize="4x"></lux-icon>
<lux-icon luxIconName="lux-interface-edit-write-2" luxIconSize="5x"></lux-icon>
Html
<div class="lux-flex lux-flex-wrap lux-gap-4">
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: red"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: green"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: purple"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: blue"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: gray"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: orange"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: brown"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: black"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: yellow"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: pink"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
style="color: lightblue"
></lux-icon>
</div>
Html
<div class="lux-flex lux-flex-wrap lux-gap-4">
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="red"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="green"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="purple"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="blue"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="gray"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="orange"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="brown"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="black"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="yellow"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="pink"
></lux-icon>
<lux-icon
luxIconName="lux-interface-favorite-like-1"
luxColor="lightblue"
></lux-icon>
</div>
Html
<lux-icon
luxIconName="lux-interface-edit-write-2"
luxIconSize="1x"
[luxRounded]="true"
luxColor="blue"
>
</lux-icon>
<lux-icon
luxIconName="lux-interface-edit-write-2"
luxIconSize="2x"
[luxRounded]="true"
luxColor="blue"
>
</lux-icon>
<lux-icon
luxIconName="lux-interface-edit-write-2"
luxIconSize="3x"
[luxRounded]="true"
luxColor="blue"
>
</lux-icon>
<lux-icon
luxIconName="lux-interface-edit-write-2"
luxIconSize="4x"
[luxRounded]="true"
luxColor="blue"
>
</lux-icon>
<lux-icon
luxIconName="lux-interface-edit-write-2"
luxIconSize="5x"
[luxRounded]="true"
luxColor="blue"
>
</lux-icon>
Html
<lux-icon
luxIconName="lux-food-burger"
luxIconSize="42px"
luxPadding="16px"
[luxRounded]="true"
luxColor="blue"
></lux-icon>
Html
<lux-icon
luxIconName="lux-food-burger"
luxIconSize="2x"
luxPadding="10px 20px"
luxColor="blue"
></lux-icon>
Html
<div
style="border-radius: 4px; width: fit-content"
class="lux-bg-color-primary-50"
>
<lux-icon
luxIconName="lux-food-burger"
luxIconSize="42px"
luxMargin="10px"
class="lux-color-blue"
></lux-icon>
</div>Das Custom-Icon wird im Asset-Ordner abgelegt. Aber bevor es verwendet werden kann, muss das Icon dem LuxIconRegistryService bekannt gemacht werden. Es ist ausreichend, wenn das Custom-Icon einmal registriert wird, d.h. der Konstruktor der app.component.ts würde sich anbieten.
Bitte die LUX-Icons verwenden und ausschließlich in Ausnahmefällen individuelle Icons verwenden!
Beispiel ohne CDN:
constructor(private iconService: LuxIconRegistryService) {
iconService.getSvgIconList().push({ iconName: 'app-icon-custom', iconPath: '/assets/svg/custom.svg'});
}Beispiel mit CDN oder angepasstem iconBasePath:
Der iconBasePath wird bei der Verwendung eines CDNs angepasst (siehe LUX-Components-Config). Wenn ein Custom-Icon aus der App verwendet werden soll, muss der iconBasePath bei der Registrierung auf '/' gesetzt werden.
constructor(private iconService: LuxIconRegistryService) {
iconService.getSvgIconList().push({ iconName: 'app-icon-custom', iconBasePath: '/', iconPath: '/assets/svg/custom.svg'});
}<lux-icon luxIconName="app-icon-custom"></lux-icon>