Lucide Preact

Lucide 图标的 Preact 组件，提供类似 React 的开发体验，同时体积更小。每个图标都是轻量级的 Preact 组件，以内联 SVG 渲染，适用于需要 React 兼容性但想要减少捆绑大小的应用。

你可以实现的功能：

• 将图标作为 Preact 组件使用，语法和模式类似 React
• 利用 Preact 更小的运行时构建轻量级应用
• 创建快速、响应式界面，降低 JavaScript 开销
• 在保持 React 兼容性的同时减少捆绑体积
• 与现有的 Preact 应用和组件库无缝集成

安装

pnpm

pnpm install lucide-preact

yarn

yarn add lucide-preact

npm

npm install lucide-preact

bun

bun add lucide-preact

如何使用

Lucide 使用 ES Modules 构建，因此完全可以进行 tree-shake。

每个图标可以被导入为 Preact 组件，渲染为内联 SVG 元素。这样，只有被导入到项目中的图标会被包含在最终捆绑包中，其余图标会被 tree-shaken。

示例

可以传递额外的属性来自定义图标：

import { Camera } from 'lucide-preact';

// 用法
const App = () => {
  return <Camera color="red" size={48} />;
};

export default App;

Props

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

传递属性

要定制图标的外观，你可以直接向组件传递自定义属性。组件会把所有 SVG 属性当作 props 接收，允许对 SVG 元素进行灵活的样式化。请参阅 MDN 上的 SVG Presentation Attributes 列表。

// 用法
const App = () => {
  return <Camera fill="red" stroke-linejoin="bevel" />;
};

Preact 中的 SVG 属性不会被转换，所以如果你想更改比如 stroke-linejoin，需要以 kebabcase 的形式传递。基本上就是 SVG 规范要求你写的方式。见Preact 文档中的此主题。

使用 Lucide lab 或自定义图标

Lucide lab 是一个不属于 Lucide 主库的图标集合。

可以通过 Icon 组件使用它们。所有像正常 Lucide 图标一样的 props 都可以传递来调整图标外观。

使用 Icon 组件

这会基于传入的 iconNode 创建一个单一图标并渲染 Lucide 图标组件。

import { Icon } from 'lucide-preact';
import { coconut } from '@lucide/lab';

const App = () => (
  <Icon iconNode={coconut} />
);

一个通用图标组件

可以创建一个通用图标组件来加载图标，但不建议这样做。

DANGER

下面的示例会导入所有 ES Module，使用时请注意风险。进口所有图标会显著增加应用的构建体积，影响其性能。这在使用 Webpack、Rollup 或 Vite 等打包工具时尤为重要。

Icon 组件示例

import { icons } from 'lucide-preact';

const Icon = ({ name, color, size }) => {
  const LucideIcon = icons[name];

  return <LucideIcon color={color} size={size} />;
};

export default Icon;

使用 Icon 组件

import Icon from './Icon';

const App = () => {
  return <Icon name="house" />;
};

export default App;