WP SVG Helpers

WP SVG Helpers makes it easy to inline SVG files into any WordPress project.

Supported by 10up.

Installation

1. Upload the entire /wp-svg-helpers directory to the /wp-content/plugins/ directory.
2. Activate WP SVG Helpers through the Plugins menu in WordPress.

Usage

SVG File Path Setting

The SVG file path for the activated theme can be set via a setting through the Settings > Media menu in WordPress. By default, the path is set to assets/svg/dist/, but it can be easily changed. Follow these steps to change the file path setting:

1. Navigate to the Settings > Media menu in WordPress.
2. Look for the new section in the WordPress Media Settings Screen titled SVG Helpers.
3. Enter the correct path to your theme's SVG files in the input field.
4. Click Save Changes.

Template Tags

WP SVG Helpers has two template tags for use in a theme.

For an inlined SVG file, use:

<?php inline_svg( 'name-of-svg' ); ?>

For a button with an SVG file, use:

<?php svg_button( 'name-of-svg', 'Button Title', 'location', 'class', 'a11y' ); ?>

The SVG file location is optional for buttons, but it can be easily set to either right or left. If the location is not provided, the SVG file will be located on the left by default. The class is the css class for the button and a11y allowes for developer defined accessibility attributes.

Button Class Filter

The CSS class for buttons can be easily filtered via a custom function filtering wpsvg_button_class. To filter the button class, use:

<?php
function my_button_filter( $classes ) {
    $classes[] = 'your-button-class';
   
    return $classes;
}
add_filter( 'wpsvg_button_class', 'my_button_filter' );
?>

A11y Attributes

Accessibility attributes can be easily defined as a string, as such:

<?php svg_button( 'name-of-svg', 'Button Title', 'location', 'class', 'aria-pressed=false' ); ?>

Roadmap

The Roadmap aims to outline future features.

• Addition of JavaScript helper functions.