Lucide 中文网

Appearance

Using the SVG sprite ​

学习如何在项目中使用带有 Lucide 图标的 SVG 精灵，包括基本用法和内联选项。

🌐 Learn how to use SVG sprites with Lucide icons in your project, including basic usage and inline options.

不建议用于高流量生产环境

SVG 雪碧图包含所有图标，这可能会显著增加你应用的包大小和加载时间。对于生产环境，我们建议使用支持树摇（tree-shaking）的打包工具，只包含你实际使用的图标。考虑使用某个特定框架的 包。

SVG 精灵可以作为单独的图片加载，也可以与 <use> 元素内联使用。你可能还需要一个额外的 SVG 加载器来处理项目中的 node_modules 导入。查看我们的 codesandbox 示例 获取一个可用的示例。

🌐 SVG sprites can be loaded as individual image, or used inline with the <use> element. You may also need an additional SVG loader to handle node_modules imports in your project. Check out our codesandbox example for a working example.

基础精灵使用 ​

🌐 Basic sprite usage

SVG 精灵可以直接在 img 标签中导入，并使用 #{icon-name} 语法选择图标
:

html
<img src="lucide-static/sprite.svg#house" />

内联使用 ​

🌐 Inline usage

你也可以将精灵与 <use> 元素内联使用。这允许你直接对 SVG 元素应用 CSS 样式。

🌐 You can also use the sprite inline with the <use> element. This allows you to apply CSS styles directly to the SVG elements.

<!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 on CodeSandboxOpen Sandbox

与 CSS 辅助类内联 ​

🌐 Inline with CSS helper class

如果你愿意，可以使用 CSS 来保存基本的 SVG 属性：

🌐 If you'd prefer, you can use CSS to hold your base SVG properties:

.lucide-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
Open on CodeSandboxOpen Sandbox