Lucide Preact

lucide 图标库的 Preact 应用实现。

安装

pnpm

pnpm install lucide-preact

yarn

yarn add lucide-preact

npm

npm install lucide-preact

bun

bun add lucide-preact

使用方法

Lucide 使用 ES 模块构建，因此完全可树摇。

每个图标可以作为 Preact 组件导入，它会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标才会包含在最终的包中。其余图标会被树摇掉。

示例

可以传递额外的 props 来调整图标：

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

应用 props

要自定义图标的外观，您可以直接将自定义属性作为 props 传递给组件。组件接受所有 SVG 属性作为 props，这允许灵活地样式化 SVG 元素。请参阅 MDN 上的 SVG 表示属性列表。

// 使用
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 模块，因此使用时请谨慎。导入所有图标会显著增加应用程序的构建大小，负面影响其性能。这在使用像 Webpack、Rollup 或 Vite 这样的打包工具时尤为重要。

图标组件示例

import { icons } from 'lucide-preact';

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

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

export default Icon;

使用图标组件

import Icon from './Icon';

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

export default App;