Icon太多导致页面加载慢，怎么优化才合理？

直接说，SVG Sprite 是目前最平衡的方案，比雪碧图维护简单，比单独请求快。

先把你的图标整合成一个 sprite 文件，比如新建 icons.svg，内容大概是这样：

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">

  <symbol id="icon-home" viewBox="0 0 24 24">

    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>

  </symbol>

  <symbol id="icon-user" viewBox="0 0 24 24">

    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>

  </symbol>

  <symbol id="icon-settings" viewBox="0 0 24 24">

    <path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>

  </symbol>

</svg>

然后在页面里这样用：

<svg><use href="#icon-home"></use></svg>

<svg><use href="#icon-user"></use></svg>

<svg><use href="#icon-settings"></use></svg>

一个 HTTP 请求搞定所有图标，而且想改颜色大小直接 CSS 控制 svg 就行。

如果项目是 React/Vue 之类的，可以封装成一个组件：

const Icon = ({ name, className }) => (

  <svg className={className}>

    <use href={/icons.svg#icon-${name}} />

  </svg>

);



// 用的时候

<Icon name="home" />

<Icon name="user" />

维护方式就是往 icons.svg 里塞 symbol，删掉不用的就行，比改雪碧图坐标简单多了。

如果图标真的特别多，可以按页面拆分多个 sprite，需要哪个页面加载对应的文件。不过正常项目一个 icons.svg 足够，除非上百个图标才考虑拆分。