Icons
Collection of icon sprite helper functions for WordPress themes., (*1)
Installation
You can install the package via Composer:, (*2)
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, (*3)
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., (*4)
get_icon( string $icon_name, string $width, string $height, array $args = [] )
, (*5)
Returns: string
The HTML to be used in a template., (*6)
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, (*7)
<?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., (*8)
Has the possibility to add a description for the icon to provide better accessibility., (*9)
get_svg_icon( string $path, string $width = '', string $height = '', array $args = [] )
, (*10)
Returns: string
The HTML to be used in a template., (*11)
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.
|, (*12)
PHP, (*13)
<?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., (*14)
prepare_html_tag_attribute( string $value = '', string $name = '' )
, (*15)
Returns: string
, (*16)
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., (*17)
Returns: string
The URI to the icon sprite. Default build/icons/icons.svg
, (*18)
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:, (*19)
add_filter( 'get_icon_url', function( $icon_url ) {
return 'absolute/path/to/your/icon/sprite.svg';
} );
Twig Functions
You need Timber to use this., (*20)
icon
Shorthand function for get_icon()
., (*21)
{{ 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., (*22)