How to use <use> for SVG's
The basic idea:
Put all of your svg's inside a hidden svg tag and wrap the contents of each icon in a symbol tag with an id.
Then you reference your svg by it's id like so:
It's really that easy. (You can add optional attributes directly to the svg tag itself, or give it a class and add styles that way).
I recently learned that you can also reference an external svg file, and that would look something like this:
<svg> <use href="/path/to/external-file.svg#my-svg"></use> </svg>