Learn how to load a single SVG icon set from an external URL in order to take advantage of caching. This has the added benefit of not needing to include the same chunk of SVG on every page where icons are displayed. Since it’s the same resource being requested for each icon, the browser can cache the file as well.
Note: The SVG must be hosted on the same domain as the requested page.
[00:00] We'll be working with the following sprite and SVG symbols. Notice that the outer SVG tag has an xml namespace attribute, and each symbol tag wraps the icon path, and each symbol has an ID and a view box. These are important for the icons to display properly.
[00:20] Let's start by adding an SVG tag, we'll give it a class of icon. Inside the SVG, I'll add a use tag, and I'll add an x-link:href attribute. I'll paste the URL to the sprite, and I'll append # and add the ID of plug. This is a fragment identifier, and it matches up with the corresponding ID on the symbol tag in the SVGs.
[00:50] To add other icons, we can just duplicate that code, and change plug to let's say star, and umbrella. You'll notice nothing is displaying and that's because the page that we're currently on is at a different domain than where the SVG is hosted, and that's a cores issue, and that's because cores is not supported for loading SVG symbols.