Lucide 中文网

Appearance

入门 ​

🌐 Getting started

本指南将帮助你在 Vanilla JavaScript 项目中开始使用 Lucide。确保你的环境已设置好。如果你还没有环境，可以使用 Vite、Parcel 或你选择的任何其他模板创建一个新项目。

🌐 This guide will help you get started with Lucide in your Vanilla JavaScript project. Make sure you have a your environment set up. If you don't have one yet, you can create a new project using Vite, Parcel or any other boilerplate of your choice.

安装 ​

🌐 Installation

软件包管理器 ​

🌐 Package Managers

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

内容分发网络 ​

🌐 CDN

html

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>


<script src="https://unpkg.com/lucide@latest"></script>

我们强烈建议你固定到一个特定的版本，例如 https://unpkg.com/lucide@x.xxx.x/dist/umd/lucide.min.js，而不是使用 @latest。这是因为最新版本可能引入破坏性更改，可能会导致你的应用出现问题。通过固定到特定版本，你可以确保即使将来库有更新，你的应用仍然保持稳定和可用。

🌐 We strongly suggest you anchor to a specific version, such as https://unpkg.com/lucide@x.xxx.x/dist/umd/lucide.min.js, rather than using @latest. This is because the latest version may introduce breaking changes that could potentially break your application. By anchoring to a specific version, you can ensure that your application remains stable and functional, even if there are updates to the library in the future.

导入你的第一个图标 ​

🌐 Importing your first icon

Lucide 基于 ES 模块构建，因此完全支持 tree-shaking。

🌐 Lucide is built with ES Modules, so it's completely tree-shakable.

createIcons 函数将搜索具有属性 data-lucide 的 HTMLElement，并用给定图标名称的 svg 替换它。

🌐 The createIcons function will search for HTMLElements with the attribute data-lucide and replace it with the svg from the given icon name.

示例 ​

🌐 Example

html

<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 来调整属性名以替换图标（默认是 data-lucide）。
  • 你可以传递 attrs 来传递额外的自定义属性，例如 CSS 类或描边选项。
  • 你可以传递 root 来提供一个自定义的 DOM 元素，图标应在其中被替换（在操作大型 DOM 的小部分或 shadow DOM 中的元素时很有用）
  • 你可以传入 inTemplates: true 来替换 <template> 标签内的图标。

这是一个完整的示例：

🌐 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.
});

使用 CDN 的示例 ​

🌐 Example using a CDN

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>