I’m working on a new WordPress theme, favoring an SVG sprite over an icon font. It definitely comes with its own set of new challenges.
The CSS-Tricks site has definitely proven invaluable to me during this process, as I’m not all that well-versed in SVGs — neither their creation, nor their use. For my theme’s purposes, I’ve settled on the inline method of embedding the SVG sprite, using fragment identifiers for the individual icons. Modern browsers support it, even as far back as Internet Explorer 9, according to Can I Use. There are, however, some additional tricks to get things working in WordPress theme.
In his article on using SVG, Chris Coyier states that one should use
file_get_contents() instead of
<?php echo file_get_contents("kiwi.svg"); ?>
And this works fine, except when you run your theme through the WordPress theme checker plugin. When you do, it freaks out because it doesn’t like it that you’re getting a file’s contents directly. So how do you embed an SVG? I discovered that
get_template_part() will do nicely in its place.
<?php get_template_part( 'images/sprite.svg' ); ?>
There is, however, a caveat. This function expects a template part, you know, a PHP file. So it’s actually looking for the file
images/sprite.svg.php. Renaming the SVG with a “.php” at the end will do the trick.