An SVG icon workflow utilising Gulp as a build tool and providing fallbacks for older browsers
The idea behind this workflow is to show a way on how you can leverage all the awesome features that SVGs have to offer within an Icon system, whilst still providing fallbacks for older browsers.
This repository has been setup to act as a demonstration on how you can use this proposed workflow in your projects. Please use the following guide to learn how to utilise the workflow, then feel free to modify this into your own projects.
npm install
within the project to install all dependencies.gulp sprites
which will look at the SVGs within assets/app/icons
, provide PNG fallbacks within assets/dist/icons/png
and moerge all SVGs together into assets/dist/icons/svg-sprites.svg
.index.php
appear. (Take a look in IE8 to see the fallback).You'll need the following to utilise this workflow in your own projects:
assets/dist/icons/svg-sprites.svg
linked just after the opening <body>
tag.assets/app/js/icon-fallback.js
file which should be linked to after all SVGs have loaded. Preferably just before the closing </body>
tag.If you'd like to leave me feedback on the workflow or even better, would consider contributing to it, then please use the Issues or Pull Requests to help consolidate everything for others to see.
Heres a list of awesome people/project which made this workflow possible.
<symbol>
tag.