入门

🌐 Getting started

本指南将帮助你在 Solid 项目中入门使用 Lucide。 确保你已经设置好了 Solid 环境。如果你还没有，可以使用 Create Solid App、Vite 或任何你选择的 Solid 模板创建一个新的 Solid 项目。

🌐 This guide will help you get started with Lucide in your Solid project. Make sure you have a Solid environment set up. If you don't have one yet, you can create a new Solid project using Create Solid App, Vite, or any other Solid boilerplate of your choice.

安装

🌐 Installation

pnpm

pnpm add lucide-solid

yarn

yarn add lucide-solid

npm

npm install lucide-solid

bun

bun add lucide-solid

在用 Solid 2 吗？

Lucide 会为每个主要的 Solid 版本发布一个包。本指南涵盖 Solid 1 和 lucide-solid 包。如果你的应用是 Solid 2，则安装 @lucide/solid：

🌐 Lucide ships one package per major Solid version. This guide covers Solid 1 and the lucide-solid package. If your app is on Solid 2, install @lucide/solid instead:

pnpm

pnpm add @lucide/solid

yarn

yarn add @lucide/solid

npm

npm install @lucide/solid

bun

bun add @lucide/solid

这两个包导出的图标组件和属性都相同，所以本指南的其余部分不变——只是导入的标识符不同：

🌐 Both packages export the same icon components with the same props, so the rest of this guide applies unchanged — only the import specifier differs:

import { Camera } from '@lucide/solid';

不同的是 Solid 本身。最有可能影响你围绕 Lucide 编写的代码的变化有：

🌐 What does differ is Solid itself. The changes most likely to affect the code you write around Lucide:

	lucide-solid	@lucide/solid
实心版本	^1.4.7	^2.0.0-rc.0
DOM 运行时包	solid-js/web	@solidjs/web
jsxImportSource	solid-js	@solidjs/web
分割图标属性	splitProps(props, ['size'])	omit(props, 'size')
提供上下文	<Ctx.Provider value={…}>	<Ctx value={…}>

查看 Solid 2 迁移指南 获取完整列表。

🌐 See the Solid 2 migration guide for the full list.

Solid 2 仍然是候选版本，所以也把 @lucide/solid 当作预发布版本看待。本指南中的实际示例都是运行在 Solid 1 上的。

🌐 Solid 2 is still a release candidate, so treat @lucide/solid as pre-release too. The live examples throughout this guide run on Solid 1.

导入你的第一个图标

🌐 Importing your first icon

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

🌐 Lucide is built with ES Modules, so it's completely tree-shakable.

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

🌐 Each icon can be imported as a Solid component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

import { Camera } from 'lucide-solid';

// Usage
const App = () => {
  return <Camera />;
};

export default App;

属性

🌐 Props

要自定义图标的外观，你可以使用以下属性：

🌐 To customize the appearance of an icon, you can use the following props:

名称	类型	默认值
size	数字	24
color	字符串	currentColor
strokeWidth	数字	2
nonScalingStroke	布尔值	false

因为图标渲染为 SVG 元素，所有标准的 SVG 属性也可以作为属性应用。请参见 MDN 上的 SVG 表现属性列表。

🌐 Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on MDN.

// Usage
const App = () => {
  return (
    <Camera
      size={48}
      color="red"
      strokeWidth={1}
    />
  );
};

更多示例和如何使用 props 的详细信息，继续指南：

🌐 More examples and details how to use props, continue the guide:

颜色Adjust the color of your icons尺寸Adjust the size of your icons描边宽度Adjust the stroke width of your icons