SVG Use

The optimal way to serve SVG icons is as a sprite sheet loaded inline in our project. This gives us the ability to usei different fill and currentColor on the same icon in multiple locations.

See the Pen SVG `use` by Dave Cross (@davecross) on CodePen.

We can go further by planning to have our icons be two-tone.

See the Pen SVG `use` (multi-colour) by Dave Cross (@davecross) on CodePen.

With a little bit of planning, it’s possible to create whole series of artful shapes with just a few generic shapes. Most of the following was built off a single hexagon:

See the Pen Hexagon component by Dave Cross (@davecross) on CodePen.