如何在避免FOMI的同时在外部CDN上缓存SVG图标？

Question

我知道如何在我的网站上加载SVG图标,但我无法弄清楚如何满足以下所有限制:

1. 能够在CSS中使用SVG图标
2. 没有丢失的图标(FOMI)
3. 最小初始页面大小
4. 缓存的SVG
5. 能够使用CDN
6. 必须能够fill: currentColor使图标与当前文本颜色匹配,就像图标字体一样
7. 奖励:像素对齐SVG,使它们看起来总是很清晰

通过使用外部精灵映射可以满足1,2,3和4:

<svg viewBox="0 0 100 100">
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="/assets/sprite-4faa5ef477.svg#icon-asterisk-50af6"></use>
</svg>

但是在浏览器修复CORS问题之前我们不能使用CDN .

我们可以修补对外部域的支持,但我很确定这对CSS不起作用,因为它只监视DOM(抱歉,尚未测试),并且它还会导致你的浏览器产生一大堆对无法获取的文件的请求失败(页面上每个图标一个).

我们可以使用CDN,而不是内联整个SVG(增加页面大小,没有缓存)或我们AJAX它(导致FOMI).

那么,有没有满足所有的解决方案 五 7个限制？

基本上我希望SVG和图标字体一样方便,或者没有切换点.SVG支持多种颜色,并且更容易访问,但我无法让它们看起来很好,或者加载效率很高.

Answer 1

我最好的猜测是使用data uris，它具有非常好的浏览器支持。通过Grunticon或他们的网络应用程序Grumpicon之类的东西。

输出是 2 个css文件，其中 1 个js文件应与您的 CDN 无缝协作。

渲染的输出非常灵活且可定制。