Lucide 中文网

Appearance

Lucide ​

用于原生 JavaScript 应用的核心 Lucide 包。此包允许你轻松地将可缩放的矢量图标添加到任何 Web 项目，而无需依赖任何框架。非常适合静态网站、旧版应用，或需要轻量级图标集成并最大程度兼容浏览器的情况。

¥The core Lucide package for vanilla JavaScript applications. This package allows you to easily add scalable vector icons to any web project without framework dependencies. Perfect for static websites, legacy applications, or when you need lightweight icon integration with maximum browser compatibility.

你可以实现的目标：

¥What you can accomplish:

  • 使用简单的数据属性将图标添加到 HTML

    ¥Add icons to HTML using simple data attributes

  • 使用 JavaScript 动态创建和插入 SVG 图标

    ¥Dynamically create and insert SVG icons with JavaScript

  • 使用 CSS 类和内联样式自定义图标外观

    ¥Customize icon appearance with CSS classes and inline styles

  • 对未使用的图标进行 Tree-shaking 以最小化包大小

    ¥Tree-shake unused icons to keep bundle sizes minimal

  • 在任何 JavaScript 环境或纯 HTML 中使用图标

    ¥Use icons in any JavaScript environment or plain HTML

安装 ​

¥Installation

软件包管理器 ​

¥Package Managers

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

CDN ​

html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

<!-- Production version -->
<script src="https://unpkg.com/lucide@latest"></script>

用法 ​

¥Usage

使用 unpkg ​

¥With unpkg

这是一个使用 unpkg 的完整示例

¥Here is a complete example with unpkg

html
<!DOCTYPE html>
<body>
  <i data-lucide="volume-2" class="my-class"></i>
  <i data-lucide="x"></i>
  <i data-lucide="menu"></i>

  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>

使用 ESModules ​

¥With ESModules

为了减小包大小，lucide 内置了完全可进行 tree-shaking 的功能。createIcons 函数将搜索具有属性 data-lucide 的 HTML 元素，并将其替换为给定图标名称的 svg 文件。

¥To reduce bundle size, lucide is built to be fully tree-shakable. The createIcons function will search for HTMLElements with the attribute data-lucide and replace it with the svg from the given icon name.

html
<!-- Your HTML file -->
<i data-lucide="menu"></i>
js
import { createIcons, icons } from 'lucide';

// Caution, this will import all the icons and bundle them.
createIcons({ icons });

// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';

createIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe
  }
});

高级用法 ​

¥Advanced Usage

附加选项 ​

¥Additional Options

在 createIcons 函数中，你可以传递一些额外的参数：

¥In the createIcons function you can pass some extra parameters:

  • 你可以传递 nameAttr 来调整要替换的属性名称。

    ¥you can pass nameAttr to adjust the attribute name to replace for

  • 你可以传递 attrs 来传递其他自定义属性，例如 CSS 类或描边选项。

    ¥you can pass attrs to pass additional custom attributes, for instance CSS classes or stroke options.

  • 你可以传递 root 来提供一个自定义 DOM 元素，用于替换图标（在操作大型 DOM 的小部分或影子 DOM 中的元素时很有用）

    ¥you can pass root to provide a custom DOM element the icons should be replaced in (useful when manipulating small sections of a large DOM or elements in the shadow DOM)

  • 你可以传递 inTemplates: true 来替换 <template> 标签内的图标。

    ¥you can pass inTemplates: true to also replace icons inside <template> tags.

这是一个完整的示例：

¥Here is a full example:

js
import { createIcons } from 'lucide';

createIcons({
  attrs: {
    class: ['my-custom-class', 'icon'],
    'stroke-width': 1,
    stroke: '#333'
  },
  nameAttr: 'data-lucide', // attribute for the icon name.
  root: element, // DOM element to replace icons in.
  inTemplates: true // Also replace icons inside <template> tags.
});

使用 Treeshake 库，仅使用你使用的图标 ​

¥Treeshake the library, only use the icons you use

js
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';

createIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe
  }
});

自定义文档根目录 ​

¥Custom Document root

在自定义根元素（例如影子 DOM 根目录）中应用图标。

¥Apply icons in a custom root element, for instance a shadow DOM root.

js
import { createIcons } from 'lucide';

// Custom root element, for instance a shadow DOM root.
const shadowRoot = element.attachShadow({ mode: 'open' });

createIcons({
  root: shadowRoot
});

在 <template> 标签内应用图标 ​

¥Apply icons inside <template> tags

默认情况下，<template> 标签内不会添加图标。将 inTemplates 选项设置为 true 后，模板内的图标也会被替换。

¥By default icons inside <template> tags are not added. By setting the inTemplates option to true, icons inside templates will also be replaced.

js
import { createIcons } from 'lucide';

createIcons({
  inTemplates: true
});

自定义元素绑定 ​

¥Custom Element binding

js
import { createElement, Menu } from 'lucide';

const menuIcon = createElement(Menu); // Returns HTMLElement (svg)

// Append HTMLElement in the DOM
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);

使用自定义属性的自定义元素绑定 ​

¥Custom Element binding with custom attributes

js
import { createElement, Menu } from 'lucide';

const menuIcon = createElement(Menu, {
  class: ['my-custom-class', 'icon'],
  'stroke-width': 1,
  stroke: '#333'
}); // Returns HTMLElement (svg)

// Append HTMLElement in the DOM
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);

使用 Lucide Lab 或自定义图标 ​

¥With Lucide lab or custom icons

Lucide Lab 是一个图标集合，不属于 Lucide 主库。它们的使用方式与官方图标相同。

¥Lucide lab is a collection of icons that are not part of the Lucide main library. They can be used in the same way as the official icons.

js
import { coconut } from '@lucide/lab';

createIcons({
  icons: {
    coconut
  }
});