How I included animated SVG icons using shortcodes

This blog post was written by Nick McBurney 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]

Let me know what you think

Your email address will not be published. Required fields are marked *