Hide

YetaWF Documentation

Display
Print

Sprites

Images can be *.png, *.jpeg, etc. files or to improve/minimize downloaded resources, sprites can be used instead. Sprites are images that are combined into one single downloadable image file.

Example Icon Collection

Icon Collection

Such an icon collection, requires a matching sprite dictionary which is used to translate image names (such as #ModulePreview) into the CSS class names (yic yic_componentshtml_modprev).

//Sprites
public static Dictionary<string, string> PredefSpriteIcons = new Dictionary<string, string> {
    { "#ModulePreview", "yic yic_componentshtml_modprev" },
    { "#PagePreview", "yic yic_componentshtml_pageprev" },
    { "#TextCopy", "yic yic_componentshtml_textcopy" },
    { "#TextAreaSourceOnlyCopy", "yic yic_componentshtml_textareasrccopy" },
    { "#UrlRemote", "yic yic_componentshtml_urlremote" },
    { "#ModuleMenuEdit", "yic yic_componentshtml_modmenuedit" },
};

The BuildKnownIcon method creates an <i> tag with the CSS classes found in the sprites dictionary.

ImageHTML.BuildKnownIcon("#ModulePreview", sprites: Info.PredefSpriteIcons);

For example, if the sprite #ModulePreview is used, the following <i> tag is generated:

<i class="yic yic_componentshtml_modprev"></i>

In order for the image to be rendered, a CSS file is required to show the desired image.

/* Icon/sprite */

i.yic {

    $width: 16px;
    $height: 16px;

    &.yic_componentshtml_modprev {
        background: url(IconCollection.png) 0px 0px no-repeat;
    }
}

It's possible to use icon libraries such as fontawesome by using a sprite dictionary with the matching fontawesome CSS.

public static Dictionary<string, string> PredefSpriteIcons = new Dictionary<string, string> {
    { "#Igloo", "yic fas fa-igloo" },
};

"fas fa-igloo" are the CSS classes required to render the fontawesome icon "Igloo". The yic CSS class is required by YetaWF as it identifies sprite images.

In the above example, the image named #Igloo generates the following HTML:

<i class="yic fas fa-igloo"></i>