Lucide 中文网

Appearance

Lucide Static ​

此软件包包含以下 Lucide 图标的实现：

¥This package includes the following implementations of Lucide icons:

  • 单独的 SVG 文件

    ¥Individual SVG files

  • SVG 精灵

    ¥SVG sprite

  • 图标字体文件

    ¥Icon font files

  • 导出 SVG 字符串的 JavaScript 库

    ¥A JavaScript library exporting SVG strings

它适合谁？ ​

¥Who is this for?

lucide-static 适用于非常特殊的用例，即你希望使用 Lucide 图标而不依赖 JavaScript 框架或组件系统。理想情况：

¥lucide-static is suitable for very specific use cases where you want to use Lucide icons without relying on a JavaScript framework or component system. It's ideal for:

  • 将图标字体与纯 CSS 或实用优先框架结合使用的项目

    ¥Projects that use icon fonts with plain CSS or utility-first frameworks

  • 将原始 SVG 文件或精灵图直接嵌入 HTML

    ¥Embedding raw SVG files or sprites directly in HTML

  • 使用 SVG 作为 CSS 背景图片

    ¥Using SVGs as CSS background images

  • 将 SVG 字符串导入 Node.js (CommonJS) 环境

    ¥Importing SVG strings into Node.js (CommonJS) environments

危险

不建议用于生产环境 ​

¥Not recommended for production

SVG 雪碧图和图标字体包含所有图标，这会显著增加应用的包大小和加载时间。

¥SVG sprites and icon fonts include all icons, which can significantly increase your app's bundle size and load time.

对于生产环境，我们建议使用支持 tree-shaking 的打包工具，以便仅包含你实际使用的图标。考虑使用：

¥For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using:

安装 ​

¥Installation

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

SVG 文件 ​

¥SVG Files

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

¥You can use standalone SVG files or SVG sprites in several ways.

查看我们的 codesandbox 示例。

¥Check out our codesandbox example.

SVG 文件作为图片 ​

¥SVG file as image

HTML 中： ​

¥In HTML:

html
<!-- SVG file for a single icon -->
<img src="~lucide-static/icons/house.svg" />
html
<!-- SVG file for a single icon -->
<img src="https://unpkg.com/lucide-static@latest/icons/house.svg" />

CSS 中： ​

¥In 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。

¥Make sure you have the correct Webpack loader configured, such as url-loader.

SVG 文件作为字符串 ​

¥SVG file as string

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

¥To import an SVG as a string (e.g., for templating):

js
import arrowRightIcon from 'lucide-static/icons/arrow-right';

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

¥You'll need an SVG loader like svg-inline-loader.

使用 SVG 精灵图 ​

¥Using the SVG sprite

危险

不适用于生产环境。

¥Not intended for production use.

你可能还需要一个额外的 SVG 加载器来处理此操作。

¥You may also need an additional SVG loader to handle this.

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

¥Basic sprite usage (not production-optimized):

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

内联使用： ​

¥Inline usage:

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 辅助类内联 ​

¥Inline with CSS helper class

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

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

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

...并按如下方式更新 SVG：

¥...and update the SVG as follows:

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

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

图标字体 ​

¥Icon font

危险

不适用于生产环境。

¥Not intended for production use.

Lucide 图标也提供 Web 字体版本。要使用它们，你首先需要包含相应的样式表：

¥Lucide icons are also available as a web font. To use them, you first need to include the corresponding stylesheet:

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 图标页面 复制图标名称。

¥Once included, use the format icon-{kebab-case-name}. You can copy icon names from the Lucide Icons page.

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

如果你不使用包管理器，可以直接从 最新版本 下载字体文件。

¥If you're not using a package manager, you can download the font files directly from the latest release.

Node.js ​

你还可以在 Node.js (CommonJS) 项目中导入 Lucide 图标：

¥You can also import Lucide icons in Node.js (CommonJS) projects:

js
const {messageSquare} = require('lucide-static/lib');

注意：每个图标名称均采用驼峰命名法。

¥Note: Each icon name is in camelCase.

Node.js 中的 Express 应用示例 ​

¥Express app example in Node.js

js
const express = require('express');
const {messageSquare} = require('lucide-static/lib');
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}`);
});