<h1>
Publications
{svgFallback icon-group}
</h1>
Result HTML code IN IE may look like:
<h1>
Publications
<svg xmlns="..." class="..." ...>
... content of symbol-defs.svg file ...
</svg>
</h1>
{svg bin, some-class, icon-group}
Result HTML code IN IE may look like:
<svg class="some-class" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bin"></use>
</svg>
Result in Chrome, FF, Opera may look like:
<svg class="some-class" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/svg/icon-group/symbol-defs.svg?v=1531909866#icon-bin"></use>
</svg>
This is a single purpose helper library with a macro definition for Latte, the PHP templating engine. It loads SVG source file and embed it into HTML code in compile time.
Motivation for this is possibility to stylize SVG by CSS then. It is not (easily)
possible with SVG linked as an image like <img src="icons/help.svg">
.
Require library by Composer:
composer require dada-amater/latte-svg
Register extension in your config.neon
and configure it:
extensions:
latteSvg: DadaAmater\LatteSvg\Extension
latteSvg:
baseDir: %wwwDir%
wwwPathMask: 'images/svg/{group}/symbol-defs.svg'
defaultGroup: base
defaultIconClass: svg-icon
iconNamePrefix: icon
Because svg
is a macro, it is compiled into PHP only once and then is cached.
So, when you change the macro configuration, probably in NEON, you have to purge
Latte cache.