tvaliasek/iconmacros

This package is abandoned and no longer maintained. No replacement package was suggested.

icon latte macro for embedding svg icons into latte templates

1.0.6 2016-10-06 20:40 UTC

This package is auto-updated.

Last update: 2019-02-20 19:49:04 UTC


README

Experimental custom latte macros for embedding svg icons, svg files are automatically sanitized.

Install

$ composer require tvaliasek/iconmacros

Configure

At this moment, configuration is made by dumb overwriting constants in IconMacro.php file

class IconMacro extends Macroset {

    /*@var string - relative path to folder with icon files */
    const ICONS_PATH = '/../../../../www/img/icons';
    /*@var string - css class name prefix*/
    const ICON_CSS_CLASSNAME_PREFIX = 'icon';
    /*@var string - mime type identifier for SVG images*/
    const SVG_MIME_TYPE = 'image/svg+xml';
    /*@var boolean - filter out non-minified files in icons folder (without .min.svg extension)*/
    const ONLY_MINIFIED = false;
    ...

Register

latte:
	macros:
		- \Tvaliasek\IconMacros\IconMacro

Use

{* macro icon will embed file named envelope.svg and fill attributes will be preserved *}
<span> {icon envelope cyan in-text} </span>

{* macro clearIcon will embed file named envelope.svg and fill attributes will be stripped *}
<span> {clearIcon envelope cyan in-text} </span>

Result

<!-- icon -->
<span>
<svg class="icon icon-envelope icon-cyan icon-in-text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000000" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"></path>
</svg>
</span>

<!-- clearIcon -->
<span>
<svg class="icon icon-envelope icon-cyan icon-in-text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"></path>
</svg>
</span>