System Icons

You are here:
Estimated reading time: 1 min

This is a development tool for theme & plugin developers to add own internal icons, which are locked from being removed by users. By “internal icons” i mean icons that are hardcoded, for example a “cart” icon, which is hardcoded into the design of the theme, should never be removed, probably only changed.

These icons are built-in into the IconPress plugin and used in various places throughout the plugin’s interface, for example one of them being the icon’s toolbar eg: https://d.pr/i/mLjnN6  .

They cannot be deleted because they’re used internally, but following a reusability principle, they’re available to be used into the website, just like any other normal icon.

How to add your own system icons:

You can add  your own icons by using the `iconpress/svg_icons/system` action.

For example create a new file in your theme eg: /mytheme/assets/system_icons.svg and inside it, you need to add the SVG icons, as <symbol> tags because this file is used as a sprite. Edit the file and paste this code:

<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="myicon-arrow-up">
  <path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"/>
</symbol>

<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="myicon-angle-up">
   <path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/>
</symbol>

This example contains 2 symbols, one is an Arrow Up icon, one is an Angle Up icon .

Into your functions.php file, create a new function and add this code:

function myTheme__addSystemIcons()
{
  if ( is_file( get_template_directory() . 'assets/system_icons.svg' ) ) {
    echo require_once( get_template_directory() . 'assets/system_icons.svg' );
  }
}

This function will simply check if the svg sprite at /mytheme/assets/system_icons.svg exists and will load it.

Finally, right after this function, you will need to apply the action to load the function above, for example:

add_action( 'iconpress/svg_icons/system', 'myTheme__addSystemIcons' );

Now these icons are loaded, you can use them in your website like this:

As simple HTML:

<svg class="iconpress-icon" viewBox="0 0 48 48">
  <use href="#myicon-arrow-up" xlink:href="#myicon-arrow-up"></use>
</svg>

or using PHP:

if( function_exists('IconPress__getSvgIcon') ) {
  echo IconPress__getSvgIcon( array( 'id' => 'myicon-arrow-up' ) );
}

Note: i’m actively developing a tool which will convert a normal icon into a system icon. Stay tuned!

Was this article helpful?
Dislike 0
Views: 80