Lucide Solid

SolidJS 组件，用于 Lucide 图标，充分利用 Solid 的细粒度反应式系统。每个图标都是一个响应式 Solid 组件，以内联 SVG 渲染，通过 Solid 的编译时优化和响应式原语提供卓越性能。

您可以实现的功能：

• 使用具有细粒度反应性的 SolidJS 组件
• 利用 Solid 的响应式系统构建高效界面
• 构建响应信号和存储的动态图标组件
• 与 Solid 的 JSX 和组件模式无缝集成
• 直接导入图标并最小化运行时开销，提升性能

安装

pnpm

pnpm install lucide-solid

yarn

yarn add lucide-solid

npm

npm install lucide-solid

bun

bun add lucide-solid

如何使用

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

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

示例

可传入附加 props 来调整图标：

import { Camera } from 'lucide-solid';

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

export default App;

Vite 在 dev 服务器中加载/执行问题可以通过直接从 lucide-solid/icons 目录导入图标来解决：

import Camera from 'lucide-solid/icons/camera';

// 用法
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 Presentation Attributes 列表。

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

使用 Lucide Lab 或自定义图标

Lucide Lab 是一组不属于 Lucide 主库的图标集合。

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

使用 Icon 组件

这会根据传入的 iconNode 创建单一图标，并渲染为 Lucide 图标组件。

import { Icon } from 'lucide-solid';
import { sausage } from '@lucide/lab';

const App = () => (
  <Icon iconNode={sausage} color="red"/>
);

一个通用图标组件

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

DANGER

下面的示例会导入所有 ES 模块，使用时请谨慎。导入所有图标会显著增加应用程序的构建大小，负面影响性能。尤其在使用 Webpack、Rollup 或 Vite 等打包器时，更应注意此点。

Icon 组件示例

import { icons, type LucideProps } from 'lucide-solid';
import { splitProps } from 'solid-js';
import { Dynamic } from 'solid-js/web';

interface IconProps extends LucideProps {
  name: keyof typeof icons;
}

const Icon = (props: IconProps) => {
  const [local, others] = splitProps(props, ["name"]);

  return <Dynamic component={icons[local.name]} {...others} />
};

export default Icon;

使用 Icon 组件

import Icon from './Icon';

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

export default App;