Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Custom

Description

Purpose: ILIAS allows users to upload icons for repository objects. Those, in opposite to the standard icons, need to be constructed with a path.
Composition: An Icon is rendered as image-tag.

Rivals

Standard Icon: Standard Icons MUST be used for core-objects.

Rules

Usage

Custom Icons MAY still use an abbreviation.

Style

Custom Icons MUST use SVG as graphic.
Icons MUST have a transparent background so they could be put on all kinds of backgrounds.
Images used for Custom Icons SHOULD have equal width and height (=be quadratic) in order not to be distorted.

Example 1: Custom icon

Small Custom Icon

Medium Custom Icon

Large Custom Icon

Small Custom Icon with Abbreviation

Medium Custom Icon with Abbreviation

Large Custom Icon with Abbreviation

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Symbol\Icon\Custom;
 
function custom_icon()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $buffer = array();
 
    $path = './src/UI/examples/Symbol/Icon/Custom/my_custom_icon.svg';
    $ico = $f->symbol()->icon()->custom($path, 'Example');
 
    $buffer[] = $renderer->render($ico)
        . ' Small Custom Icon';
 
    $buffer[] = $renderer->render($ico->withSize('medium'))
        . ' Medium Custom Icon';
 
    $buffer[] = $renderer->render($ico->withSize('large'))
        . ' Large Custom Icon';
 
 
    //Note that the svg needs to contain strictly valid xml to work with abbreviations.
    //Some exports e.g. form illustrator seem to be not properly formatted by default.
    $path = './templates/default/images/standard/icon_fold.svg';
    $ico = $f->symbol()->icon()->custom($path, 'Example')
        ->withAbbreviation('FD');
 
    $buffer[] = $renderer->render($ico)
        . ' Small Custom Icon with Abbreviation';
 
    $buffer[] = $renderer->render($ico->withSize('medium'))
        . ' Medium Custom Icon with Abbreviation';
 
    $buffer[] = $renderer->render($ico->withSize('large'))
        . ' Large Custom Icon with Abbreviation';
 
 
    return implode('<br><br>', $buffer);
}

Relations

Parents

UIComponent
Symbol
Icon