Using Perch layouts and managing SVG assets with Perch

I'm changing some of my Perch CMS sites and replacing their icon fonts with SVG alternatives (here's why).

As mentioned in this article on Perchd.io, it's possible to use Perch layouts to manage the SVG files on your site.

On my sites, I renamed my SVG assets so that they have a .php file extension and put the files into perch/templates/layouts/icons. And in my other Perch layout files, for example my footer layout perch/templates/layouts/footer.php, I included them like this:

<?php perch_layout('icons/0402-twitter'); ?>

One thing to bear in mind is that some servers will choke on the .xml declaration at the start of the SVG file when it has a .php extension (as described here). I chose to echo the .xml declaration in the file like this which solved the issue for me.

<?php echo '<?xml version="1.0" encoding="utf-8"?>';?>

Now, all my SVG assets are easily included and managed over the whole site.

You can do more by allowing editors to choose which SVG asset to use. In SVG Workflow with Perch, Adam Menczykowski describes how he implemented this in a Perch template. Nice work.

If you are using SVG assets in other ways with Perch, let me know in the comments.