mindkomm/theme-lib-icons

Collection of icon sprite helper functions for WordPress themes

1.0.1 2018-11-22 13:18 UTC

Requires

• php: >=7.0.0
• mindkomm/theme-lib-mix: ^1.0.0

MIT

• Lukas Gaechter

README

Collection of icon sprite helper functions for WordPress themes.

Installation

You can install the package via Composer:

composer require mindkomm/theme-lib-icons

Functions

get_icon

Get an icon

This function is a wrapper that makes it easier to include an icon by only providing the name of the icon and not the whole path. By adding this function, it’s also possible to use the theme version constant for cache busting.

get_icon( string $icon_name, string $width, string $height, array $args = [] )

Returns: string The HTML to be used in a template.

PHP

<?php
echo get_icon( 'angle-down', 12, 12, [ 'class' => 'icon icon-dropdown' ] );

get_svg_icon

Return HTML for an accessible SVG icon in an icon sprite.

Has the possibility to add a description for the icon to provide better accessibility.

get_svg_icon( string $path, string $width = '', string $height = '', array $args = [] )

Returns: string The HTML to be used in a template.

PHP

<?php
echo get_svg_icon(
    'https://www.mind.ch/wp-content/theme/theme-mind/build/icons/icon-sprite.svg#arrow-right',
    20, 20,
    [ 'class' => 'icon']
);

prepare_html_tag_attribute

Turn a value and a name into an HTML attribute.

prepare_html_tag_attribute( string $value = '', string $name = '' )

Returns: string

get_icon_url

Get the URI to the icon sprite.

Returns: string The URI to the icon sprite. Default build/icons/icons.svg

Filters

get_icon_url

The default location for the icon sprite is build/icons/icons.svg. If you’ve set up your theme with a different folder structure, you can use the get_icon_url filter to use a different URL throughout this library:

add_filter( 'get_icon_url', function( $icon_url ) {
    return 'absolute/path/to/your/icon/sprite.svg';
} );

Twig Functions

You need Timber to use this.

icon

Shorthand function for get_icon().

{{ icon('angle-down', 12, 12, { class: 'icon icon-dropdown' }) }}

Support

This is a library that we use at MIND to develop WordPress themes. You’re free to use it, but currently, we don’t provide any support.