Lucide Solid

Lucide 图标库的 Solid 应用实现。

安装

pnpm

pnpm install lucide-solid

yarn

yarn add lucide-solid

npm

npm install lucide-solid

bun

bun add lucide-solid

如何使用

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

每个图标都可以作为 Solid 组件导入，它会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标才会被包含在最终的包中。其余图标会被 tree-shake 移除。

示例

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

import { Camera } from 'lucide-solid';

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

export default App;

Vite 在开发服务器加载/性能问题可以通过直接从 lucide-solid/icons 目录导入图标来解决：

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

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

export default App;

Props

名称	类型	默认值
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" />;
};

与 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 这样的打包工具时尤其重要，需要牢记这一点。

图标组件示例

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;

使用图标组件

import Icon from './Icon';

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

export default App;