Icons
The implementation of icons in T2 ensures a scalable and easy way to work with svg's. The T2 icon package comes equipped with JS and PHP utilities for adding, removing and using custom icons in a project.
Adding icons
T2 comes with a set of icons that can be used in your project. To add project specific icons, you can use the register_icon function.
use function T2\Icons\register_icon;
register_icon( 'my-icon', '<path .../>', '0 0 24 24' );PHP Filters
apply_filters( 't2_icon_viewboxes', array $viewboxes )Filter viewboxes
| Parameter | Type | Description |
|---|---|---|
| $viewboxes | array | Custom viewboxes or overwrite default viewboxes. |
apply_filters( 't2_icons', array $icons )Filter icons
| Parameter | Type | Description |
|---|---|---|
| $icons | array | Custom icons or overwrite default icons. |
Using icons in PHP
Start of with importing the function you wish to use, and pass it the icon slug you set in the t2_icons-filter. There are two main functions to use to get the icons in PHP, get_icon() and icon().
The get_icon()-function returns the svg-code of the icon.
The icon()-function gets the svg-code of the icon and prints it out.
Check out the icons implementation in the github repository for more information on available arguments.
Using icons in JavaScript
Everything you need to get started with icons in JS is available in the @t2/editor-package. All of the editor packages are available under the global variable t2.editor, however, the easiest way to add support in your project is to add it as an dependency plugin in your webpack config. More information about this can be found in the editor package documentation.
To add an icon in a block, import the <Icon icon={iconSlug}/>-element from @t2/editor and pass it the icon slug as a prop. For blocks where you wish to let the user change icons on the fly, simply import the <BlockIconSelector /> or <IconSelector /> components. More information about the components can be found in the editor package documentation.
Footnotes
A common use case for icons both in JS and PHP are blocks where an icon is chosen using the <IconSelector /> or <BlockIconSelector />, to store an icon slug as an attribute. The attribute is then used in the block's server side render callback to get the icon using the aforementioned get_icon() or icon() PHP functions.