几十个小图标各自发一次请求,握手开销比图标本身还大。
把图标合并成一张 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






暂无评论内容