How to cache SVG icons on an external CDN while avoiding FOMI?
The closest I could get is loading an SVG in an image element and then using it like an "old-fashioned" image sprite. This, as far as I can tell, satisfies all of your constraints. The only disadvantage I can think of is that you lose the ability to modify specific parts of the SVG using CSS. This is however not one of your constraints (correct me if I'm wrong) and it is still possible to modify all of the icon, as you can see in my demo. I created a fiddle and for completeness also include a code snippet.
To emulate a CDN, I created an SVG file and uploaded it to some image hosting service. My apologies to future readers if this service is now down. The SVG file simply has all icons next to each other in it (I created a black square, circle and triangle for now). The difference with SVG sprite maps is thus that the icons are in the SVG itself, not in the defs. It should be quite easy to combine multiple SVGs in a single one, I have not looked for tools that would automate this process.
.icon { display: inline-block; vertical-align: top; width: 30px; /* can be anything */ height: 30px; background-image: url('http://imgh.us/icons_36.svg'); border: 1px solid #000; /* just to see where the icon is */}/* sizes */.icon.large { width: 50px; height: 50px; background-size: 150px auto;}/* icons */.icon.circle { background-position: -30px 0; }.icon.large.circle { background-position: -50px 0; }.icon.triangle { background-position: -60px 0; }.icon.large.triangle { background-position: -100px 0; }/* styles */.icon.info { /* based on http://stackoverflow.com/a/25524145/962603, * but you can of course also use an SVG filter (heh) */ filter: invert(100%) sepia(100%) saturate(50000%) hue-rotate(90deg) brightness(70%);}.icon.highlight { /* based on http://stackoverflow.com/a/25524145/962603, * but you can of course also use an SVG filter (heh) */ filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(30deg) brightness(50%);}<span class="icon square"></span><span class="icon circle"></span><span class="icon triangle"></span><span class="icon circle highlight"></span><span class="icon triangle large info"></span>
My best guess is to use data uris, which have pretty great browser support. Via something like Grunticon or their web app Grumpicon.
The output is 2 css files and 1 js that should work seamlessly with your CDN.
The rendered output is very flexible and customizable.
I had pretty much the same problem. This probably doesn't satisfy the FOMI requirement, but it's an interesting hack that got me out of a bind. Basically, this script just swaps every img in the DOM that imports an svg with inline SVG, so you can style it how you want.
// replaces img tags with svg tags if their source is an svg// allows SVGs to be manipulated in the DOM directly// 💡 returns a Promise, so you can execute tasks AFTER fetching SVGslet fetchSVGs = () => {//gets all the SRCs of the SVGslet parentImgs = Array.from(document.querySelectorAll('img')).map((img) => { if(img.src.endsWith('.svg')) { return img }});let promises = [];parentImgs.forEach((img) => { promises.push( fetch(img.src).then((response) => { // Error handling if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } // saves the SVG return response.text(); }) )});// All fetch() calls have been madereturn Promise .all(promises) .then((texts)=> { texts.forEach((text, i) => { let img = parentImgs[i]; let div = document.createElement('div'); div.innerHTML = text; img.parentNode.appendChild(div); let svg = div.firstChild; img.parentNode.appendChild(svg); // makes the SVG inherit the class from its parent svg.classList = img.className; // removes the junk we don't need. div.remove(); img.parentNode.removeChild(img); }) }) .catch((error) => { console.log(error); })};Otherwise, I came across this on Twitter today https://twitter.com/chriscoyier/status/1124064712067624960and applying this CSS to a div allowed me to make a colourable svg icon that can be stored in a CDN
.icon-mask { display: inline-block; width: 80px; height: 80px; background: red; -webkit-mask: url(https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/codepen.svg); -webkit-mask-size: cover;}Browser support isn't perfect yet though.
Hope this helps someone 😄