Lucide 中文文档

Appearance

Lucide Static ​

为 Lucide 图标提供无需 JavaScript 框架即可使用的静态资源与工具。本包提供多种格式，包括单独的 SVG 文件、SVG 精灵、图标字体和用于服务器端渲染及静态站点生成的 Node.js 实用工具。

您可以完成的任务：

  • 将单个 SVG 文件作为图片或 CSS 背景图片使用
  • 为基于 CSS 的图标系统实现图标字体
  • 为静态站点创建 SVG 精灵，提升图标加载效率
  • 在 Node.js 应用和服务器端渲染中导入 SVG 字符串
  • 构建不依赖 JavaScript 框架的静态网站和应用

本包包含以下 Lucide 图标实现方式：

  • 单独的 SVG 文件
  • SVG 精灵
  • 图标字体文件
  • 导出 SVG 字符串的 JavaScript 库

适用人群 ​

lucide-static 适用于非常特定的用例，即您想在不依赖 JavaScript 框架或组件系统的情况下使用 Lucide 图标。它非常适合：

  • 使用纯 CSS 或工具类优先框架的图标字体项目
  • 将原始 SVG 文件或精灵直接嵌入 HTML
  • 将 SVG 用作 CSS 背景图片
  • 在 Node.js（CommonJS）环境中导入 SVG 字符串

DANGER

不建议用于生产 ​

SVG 精灵和图标字体包含 所有图标，可能会显著增加应用的打包体积和加载时间。

为生产环境，我们建议使用支持摇树优化的打包器，仅包含实际使用的图标。可考虑：

安装 ​

sh
pnpm install lucide-static
sh
yarn add lucide-static
sh
npm install lucide-static
sh
bun add lucide-static

SVG 文件 ​

您可以以多种方式使用独立的 SVG 文件或 SVG 精灵。

查看我们的 codesandbox 示例。

SVG 文件作为图片 ​

在 HTML 中： ​

html
<!-- 单个图标的 SVG 文件 -->
<img src="~lucide-static/icons/house.svg" />
html
<!-- 单个图标的 SVG 文件 -->
<img src="https://unpkg.com/lucide-static@latest/icons/house.svg" />

在 CSS 中： ​

css
.house-icon {
  background-image: url(~lucide-static/icons/house.svg);
}
css
.house-icon {
  background-image: url(https://unpkg.com/lucide-static@latest/icons/house.svg);
}

确保已正确配置 Webpack 加载器，例如 url-loader。

SVG 文件作为字符串 ​

要将 SVG 作为字符串导入（例如用于模板化）：

js
import arrowRightIcon from 'lucide-static/icons/arrow-right';
js
import arrowRightIcon from 'lucide-static/icons/arrow-right.svg?raw';

需要类似 svg-inline-loader 的 SVG 加载器。

使用 SVG 精灵 ​

DANGER

不建议用于生产。

您可能还需要额外的 SVG 加载器来处理此类。

基本精灵用法（非生产优化）： ​

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

内联用法： ​

html
<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="#alert-triangle" />
</svg>

<!-- sprite SVG -->
<svg>...</svg>

使用 CSS 帮助类内联： ​

如果您更喜欢，可使用 CSS 保存基本 SVG 属性：

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

然后按如下方式更新 SVG：

xml
<svg
  xmlns="http://www.w3.org/2000/svg"
  class="lucide-icon"
>
  <use href="#triangle-alert" />
</svg>

<!-- sprite SVG -->
<svg>...</svg>

图标字体 ​

DANGER

不建议用于生产。

Lucide 图标也可作为 Web 字体使用。要使用它们，首先需要包含相应的样式表：

css
@import 'lucide-static/font/lucide.css';
css
@import ('~lucide-static/font/lucide.css');
html
<link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css" />
html
<link rel="stylesheet" href="/your/path/to/lucide.css" />

包含后，使用 icon-{kebab-case-name} 的格式。可从 Lucide 图标页面 复制图标名称。

html
<div class="icon-house"></div>

如果不使用包管理器，可直接从 最新发布页 下载字体文件。

Node.js ​

您还可以在 Node.js 项目中导入 Lucide 图标：

js
import { MessageSquare } from 'lucide-static';
js
const { MessageSquare } = require('lucide-static');

注：每个图标名称使用 PascalCase。

Node.js 中 Express 应用示例 ​

js
import express from 'express';
import { MessageSquare } from 'lucide-static';
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>Lucide Icons</h1>
        <p>This is a Lucide icon ${MessageSquare}</p>
      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(\`Example app listening at http://localhost:\${port}\`);
});