Hublify App Icons

There are some helpful functions to access the Hublify Standard App Icons.

  • They are in every render-target/environment available, since they have public urls.
  • They are not under control or maintained via the Hublify MAM.
  • These Hublify Standard Icons are all SVGs.
  • These Hublify Standard Icons come usually in 3 styles: "regular", "light" and "bold"
  • Easy html-inlining, e.g. for usage in HTML-Emails, is supported as well as normal use via referenced urls.


appIcon(...)

This function gives you a ready-to-use html-tag. Either as <svg> (content inlined) or as a standard <img>-tag referencing to public icon url.


/**
 * Renders a html-ready to use <img> (with remote src-url set) or <svg> (icon completely inline) tag of a
 * standard Hublify App-Icon
 *
 * @param string|null $iconLabel The hublify-icon, without the .svg-extension. E.g. "hublify/edit".
 *
 * @param string|null $style "regular|light|bold". (optional, default NULL => "regular").
 *
 * @param null $height The height (width) in pixel. It is assumed that the icons have squared outline.
 *
 * @param string|null $color Standard-HEX-color-code, e.g. "#ff11c0";
 *
 * @param bool $inline (optional, default FALSE). Render the actual icon-graphical-content as HTML inline.
 *  If TRUE, then a <svg>-tag is returned with all attributes etc. set as well
 *  If FALSE an <img>-tag is returned referencing with src="..." to app-icon's absolute url.
 *
 * @param array|null $attributes
 *
 * @return string|null
 */

    public function appIcon($iconLabel, $style = null, $height = null, $color = null, $inline = false, $attributes = null) : ?string



Example, url: <img ...>

To get the app icon as an image-tag, you have to set the inline-parameter to false (it is false by default).

{{ hublify.appIcon('hublify/edit') }}

Rendered result

<img src="https://myXYZ.hublify.io/files_public/app_assets/icons/regular/hublify/edit.svg" height="48px">


Example, inline: <svg...>

To get the app icon inlined into your html you have to set the inline-parameter to true.

{{ hublify.appIcon('hublify/edit', 'bold', '96px' , '#ff0000', true) }}

Rendered result


<svg stroke="#ff0000" fill="#ff0000" height="96px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <title>pencil</title>
  <path d="M16.187,3.511a.514.514,0,0,0-.707,0L4.067,14.924a.5.5,0,0,0,0,.707l4.28,4.28a.5.5,0,0,0,.707,0L20.467,8.5a.5.5,0,0,0,0-.707Z"></path>
  <path d="M3,16.71a.5.5,0,0,0-.828.2l-2.14,6.42a.5.5,0,0,0,.12.512.508.508,0,0,0,.512.121l6.42-2.139a.5.5,0,0,0,.2-.829Z"></path>
  <path d="M22.968,1.017a3.613,3.613,0,0,0-.988,0l-.712.713a.5.5,0,0,0,0,.707l4.279,4.28a.5.5,0,0,0,.707,0L22.968,6A3.53,3.53,0,0,0,22.968,1.017Z"></path>
</svg>



appIconUrl(...)

To get the site-public url of a Hublify App Icon it would look like this:

<img src="{{ hublify.appIconUrl('hublify/edit) }}" />