I wrote that using inline icons makes for the best icon system. I still think that’s true. It’s the easiest possible way to drop an icon onto a page. No network request, perfectly styleable. But inlining code has some drawbacks, one of which is that it doesn’t take advantage of caching. You’re making the browser read and process the same code over and over as you browse around. Not that big of a deal. There are much bigger performance fish to fry, right? But it’s still fun to think about more efficient patterns. Scott Jehl wrote that just because you inline something doesn’t mean you can’t cache it. Let’s see if Scott’s idea can extend to SVG icons. Starting with inline SVG Like this… Inline SVG … It’s weirdly easy to toss text into browser cache as a file In the above HTML, the selector .icon-alarm will fetch us the entire chunk of for that icon. const iconHTML = document.querySelector(.icon-alarm).outerHTML; Then we can plunk it into the browser’s cache like this: if (caches in window) { caches.open(static).then(function(cache) { cache.put(/icons/icon-wheelchair.svg, new Response( iconHTML, { headers: {Content-Type: image/svg+xml} } )); } } See the file path /icons/icon-wheelchair.svg? That’s kinda just made up. But it really will be put in the cache at that location. Let’s make sure the browser grabs that file out of the cache when it’s requested We’ll register a Service Worker on our pages: if (navigator.serviceWorker) { navigator.serviceWorker.register(/sw.js, { scope: / }); } The service worker itself will be quite small, just a cache matcher: self.addEventListener(fetch, event => { let request = event.request; event.respondWith( caches.match(request).then(response => { return response || fetch(request); }) ); }); But… we never request that file, because our icons are inline. True. But what if other pages benefitted from that cache? For example, an SVG icon could be placed on the page like this: Since /icons/icon-alarm.svg is sitting there ready in cache, the browser will happily pluck it out of cache and display it. (I was kind of amazed this works. Edge doesn’t like elements that link to files, but that’ll be over soon enough.) And even if the file isn’t in the cache, assuming we actually chuck this file on the file system likely the result of some kind of “include” (I used Nunjucks on the demo). But… and inline SVG aren’t quite the same True. What I like about the above is that it’s making use of the cache and the icons should render close to immediately. And there are some things you can style this way — for example, setting the fill on the parent icon should go through the shadow DOM that the creates and colorize the SVG elements within. Still, it’s not the same. The shadow DOM is a big barrier compared to inline SVG. So, enhance them! We could asynchronously load a script that finds each SVG icon, Ajaxs for the SVG it needs, and replaces the stuff… const icons = document.querySelectorAll(svg.icon); icons.forEach(icon => { const url = icon.querySelector(use).getAttribute(xlink:href); // Might wanna look for href also fetch(url) .then(response => response.text()) .then(data => { // This is probably a bit layout-thrashy. Someone smarter than me could probably fix that up. // Replace the with inline SVG const newEl = document.createElement(span); newEl.innerHTML = data; icon.parentNode.replaceChild(newEl, icon); // Remove the s const parent = newEl.parentNode; while (newEl.firstChild) parent.insertBefore(newEl.firstChild, newEl); parent.removeChild(newEl); }); }); Now, assuming this JavaScript executes correctly, this page has inline SVG available just like the original page did. Demo & Repo Demo on Netlify Repo on GitHub Categories: Latest technologies, software applications, UI / UX layout, UncategorizedBy adminAugust 25, 2020Tags: DesignMarketing and SEOMobile appsQualitySeoSoftwareSofware applicationsTechnologyWeb applications development Web applicationsWebsite creation Share this post Share on FacebookShare on Facebook TweetShare on Twitter Pin itShare on Pinterest Share on WhatsAppShare on WhatsApp Share on LinkedInShare on LinkedIn Author: admin http://skynetch.com Post navigationRelated PostsAlphabetizing Arrays, Objects, and Arrays of ObjectsAugust 25, 2020Going OfflineAugust 25, 2020A DevTools for DesignersAugust 25, 2020Figma Web APIAugust 25, 2020Chrome DevTools “Local Overrides”August 25, 2020?Learn UI Design: The Complete Video CourseAugust 25, 2020