20.5. Icons

Icons werden in BA über einen Namen referenziert. Als Basis dient die Icons I-Collection von IconExperience. Um ein Icon zu finden kann man die Suchseite aufrufen. Deren Namen kann man dann beispielsweise in Aktionen verwenden.

Die Icons liegen im SVG Format vor und werden von BA automatisch in PNGs der gewünschten Größe und Farbe konvertiert und zur Verfügung gestellt.

SVG Icons einbinden

Möchte man bei der Implementierung von Elementen selbst ein Icon verwenden, so kann man über eine Hilfsmethode die URL abrufen und einbinden.

string iconUrl = IconHelper.GetIconUrl("information", RequestIconSizeEnum.Size16x16);

Icon Farbe bestimmen

Soll ein Icon eine bestimmte Farbe haben muss es eine css Klasse erhalten und dann ein entsprechender Filter auf genau dieses Element gelegt werden.

CSS Beispiel, wenn man die Standard Highlight Farbe setzen möchte

.icon-mit-filter-in-highlight-farbe {
   filter: var(--icon-color-highlight);
   -webkit-filter: var(--icon-color-highlight);
   -moz-filter: var(--icon-color-highlight);
}

CSS Beispiel, für den Farbwert #00ff00 (Grün)

.icon-mit-filter-in-highlight-farbe {
   filter: invert(66%) sepia(32%) saturate(7077%) hue-rotate(84deg) brightness(111%) contrast(133%);
   -webkit-filter: invert(66%) sepia(32%) saturate(7077%) hue-rotate(84deg) brightness(111%) contrast(133%);
   -moz-filter: invert(66%) sepia(32%) saturate(7077%) hue-rotate(84deg) brightness(111%) contrast(133%);
}

Filter kann man berechnen lassen bei z.B. Codepen oder https://angel-rs.github.io/css-color-filter-generator/ (Vorsicht: Sie rechnen einmal und geben dann an, wie genau gerechnet wurde. Wenn die Farbabweichung zu hoch ist, nochmal rechnen lassen, bis “This is a perfect result” ausgegeben wird und/oder die Farbabweichung so gering ist, wie man sie gerne hätte)

Eigene SVG Icons

Möchte man eigene SVG Icons einbinden, legt man eine “icons.zip” Datei im “Content” Ordner an. Diese muss als Eingebette Resource eingebunden werden. in dieser Datei legt man seine SVG Icons ab. Da die Referenzierung über den Namen erfolgt, sollte man ein entsprechendes Präfix für die eigenen Icons verwenden.

Eigene Icons

Bindet man eigene Icons ein, ohne das BA interne System der SVG Icons und der Farbvergabe zu nutzen, muss verhindert werden, das die BA Filter auf diese Icons angewendet werden. Der Filter würde sich sonst über ein nicht-schwarzes Icon legen und falsche Farben produzieren. Dazu muss man ein CSS Style setzen.

.icon-ohne-filter {
   filter: unset;
   -webkit-filter: unset;
   -moz-filter: unset;
}