Using Shortcode for Inline SVG Icons

How I included animated SVG icons using shortcodes

This blog post was written by and published 10th May 2016.

Animated SVG rocket

My site has pages which feature animated SVG icons, Originally I included the icons on my site using inline SVG code but this looked horrible when I was pasting the code into the WordPress page editors and made it difficult to edit page content. I needed a way to shorthand my SVGs, I initially thought about adding the SVGs as background images, but SVG animation its compatible with background images. So I decided I would create some WordPress shortcodes to include the inline SVG code without cluttering my page editor.

The function below will get and display the contents of the file using a custom shortcode, you can use this to include inline SVG code, just replace the file URL with the location of your image.

function iconRocket() {
	 $rocket = file_get_contents('includes/images/rocket.svg', true); 
	 return $rocket;
 add_shortcode( 'icon-rocket', 'iconRocket' );

Shortcode: [icon-rocket]