Lucide 中文网

Appearance

Lucide ​

为 Web 应用实现 lucide 图标库。

¥Implementation of the lucide icon library for web applications.

安装 ​

¥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 函数中，你可以传递一些额外的参数来调整 nameAttr 或添加自定义属性，例如类。

¥In the createIcons function you can pass some extra parameters to adjust the nameAttr or add custom attributes like for example classes.

这是一个完整的示例：

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

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

¥Treeshake the library, only use the icons you use

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

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

自定义元素绑定 ​

¥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
  }
});