[EN] Admin template, how to add an icon

! This document is being written and can be expanded or completely rewritten
! This feature will only be available from BlogoText 3.8.

---

Before version 3.8 of BlogoText, the icons used a font file, from material design (google). But this type of use is pretty boring (file weight, boring to add / modify an icon ...) and thanks to better support for SVG by browsers, we have abandoned this system for the benefit of SVG.

about icons?

• The icons come from material.io/icons/ (we can use other sources) in SVG format.
• The svg files are placed in admin/theme/icons/.
• The HTML template will use the file admin/theme/icons.svg.php and not directly each individual icons.
• The admin/theme/icons.svg.php script retrieves the SVG files contained in admin/theme/icons/, cleans them, compresses them (slightly), modifies them and returns a single SVG file containing all the icons (<svg> are converted to <symbol>)

HTML integration

To embed an icon, we use the HTML structure <svg><use></use></svg>.
A PHP function makes it easy to get the structure tpl_ico_tag_svg($ico, $title = '').
A JavaScript function makes it easy to get the structure tpl_ico_tag_svg(ico, title).

Some specifics of our method

• The name of the SVG file, after some modifications, is used to define the ID of the corresponding symbol.
  For example: the ID for ic_check_circle_48px.svg will be check_circle.
• The HTTP request for admin/theme/icons.svg.php requires a v parameter in the URL, allowing to use versioning and to prevent some troubles with cache systems (BT, client ...). This parameter is connected to the version of BlogoText, so for version 3.8, the URL will be admin/theme/icons.svg.php?v=3.8.0
• If the client supports it, the content of admin/theme/icons.svg.php will be compressed (GZIP)

A small example :

<?php
echo tpl_ico_tag_svg('check_circle');
?>

will return :

<svg class="ico">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="theme/icons.svg.php?v=3.8.0#check_circle"></use>
</svg>

Somes explanations :

1. The SVG source file come from material.io/icons/#ic_check_circle, direct file.
2. The SVG source file have been downloaded and put in admin/theme/icons/.
3. Use PHP function tpl_ico_tag_svg('check_circle') into the admin template.
4. Done !

Notes :

• adding or modify an icon can request a version change to BlogoText.
• you can play with the icon with CSS.

pros and cons

• pros: easier modifications (adding, updating an icon ...).
• pros: less CSS
• pros: SVG file lighter than file make
• pros: customization (animation, colors ...)
• cons: HTML a bit heavier
• cons: bad support for old browsers (we do not care for the admin part of BT)