mindkomm/theme-lib-icons

Collection of icon sprite helper functions for WordPress themes

Maintainers

Details

github.com/mindkomm/theme-lib-icons

Source

Issues

Installs: 358

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 5

Forks: 0

Open Issues: 0

1.0.1 2018-11-22 13:18 UTC

Requires

MIT c4ee1981af5058c915cf5886b749ce5c8574e600

This package is auto-updated.

Last update: 2024-04-23 00:58:38 UTC

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

Name Summary Type Returns/Description
get_icon Get an icon string The HTML to be used in a template.
get_icon_url Get the URI to the icon sprite. string The URI to the icon sprite. Default build/icons/icons.svg
get_svg_icon Return HTML for an accessible SVG icon in an icon sprite. string The HTML to be used in a template.
prepare_html_tag_attribute Turn a value and a name into an HTML attribute. string

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.

Name Type Description
$icon_name string The slug of the icon.
$width string Width in pixel the icon should be displayed at.
$height string Height in pixel the icon should be displayed at.
$args array Optional. Array of arguments for SVG icon. See get_svg_icon() function.

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.

Name Type Description
$path string Absolute URL to the icon in an icon sprite.
$width string Width in pixel the icon should be displayed at.
$height string Height in pixel the icon should be displayed at.
$args array Optional. Array of arguments for SVG icon.

  • $class
    string Class names for the SVG icon.
  • $id
    string ID of the SVG icon.
  • $description
    string Description of the icon for better accessibility. Don’t describe the icon, but describe what it means.

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

Name Type Description
$value string The value to use.
$name string The attribute’s name.

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.