图标改成 SVG sprite,避免每个图标发一次请求

几十个小图标各自发一次请求,握手开销比图标本身还大。

把图标合并成一张 SVG sprite,页面里用 use 引用对应 symbol 的 id。

引用时 href 指向文件名加井号加图标名,改色用 currentColor 继承。

<svg class="icon"><use href="/assets/icons.svg#icon-search"/></svg>
<!-- sprite 文件里 -->
<symbol id="icon-search" viewBox="0 0 24 24">...</symbol>
/* 颜色跟着文字走 */
.icon { width: 1em; height: 1em; fill: currentColor; }
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容