Full Color Icons in Sencha 2
Sencha Touch 2 beinhaltet mit seinem CSS mixin "@include pictos-iconmask('attachment');" eine robuste Möglichkeit, um Icons als Base64-encodierte Strings direkt ins CSS File zu kompilieren. Dies bringt den Vorteil mit sich, dass sobald das CSS geladen ist, auch alle Icons zur Verfügung stehen und nicht mehr mit einem separaten Request vom Server nachgeladen werden wie das normalerweise bei Websites der Fall ist.
Die Einschränkung ist, dass diese Icons vom Sencha 2 Framework nur zur Verwendung als monochrome Pictos gedacht sind. D.h. die Icons werden maskiert und dann mit einer Hintergrundfarbe oder einem Gradienten gefüllt.
Mit einem eigenen custom mixin können wir den gleichen Mechanismus benutzen um auch Icons in voller Farbe einzubinden.
Dazu folgendes in die Datei "_mixins.scss" einfügen.
/**
* Includes a base64-encoded color icon for use within tab bars and buttons
*
* @include pictos-icon('attachment');
*
* @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
*/
@mixin pictos-icon($name) {
.x-button-icon.#{$name},
.x-button .x-button-icon.x-icon-mask.#{$name} {
background-image: theme_image($theme-name, "pictos/" + $name + ".png");
}
}
Danach kann man im SASS CSS File der App das neue mixin verwenden:
@include pictos-icon('drs1logo');
Die so integrierten Icons werden in voller Farbe dargestellt und man muss gegebenenfalls noch CSS Klassen erstellen welche die Width und Height des Icons anpassen.
