使用 SVG sprite

了解如何在项目中使用 YCloud Icons 的 SVG sprite，包括基础用法和内联用法。

不建议在高流量生产环境中使用

SVG sprite 包含全部图标，会显著增加应用包体积和加载时间。生产环境建议使用支持 tree-shaking 的构建工具，只包含实际使用的图标。也可以考虑使用某个框架对应的 package。

SVG sprite 可以作为外部资源加载，并通过 <use> 元素使用。项目中可能还需要额外的 SVG loader 来处理 node_modules 导入。可参考这个 codesandbox 示例。

基础 sprite 用法

可以直接在 SVG 中引用 sprite 文件，并通过 #{icon-name} 语法选择图标：

html

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="@ycloud-web/icons-static/sprite.svg#house" />
</svg>

内联用法

也可以通过 <use> 元素内联使用 sprite，这样可以直接给 SVG 元素应用 CSS 样式。

<!doctype html>
<html>
  <body>
    <svg
      width="24"
      height="24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <use href="#alarm-clock-check" />
    </svg>

    <div
      id="sprite"
      style="display: none;"
    ></div>

    <script src="index.js"></script>
  </body>
</html>

Open Sandbox

使用 CSS 辅助 class 内联

如果更偏好统一管理，也可以用 CSS 保存基础 SVG 属性：

.ycloud-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Open Sandbox

使用 SVG sprite ​

基础 sprite 用法 ​

内联用法 ​

使用 CSS 辅助 class 内联 ​

使用 SVG sprite

基础 sprite 用法

内联用法

使用 CSS 辅助 class 内联