入门

🌐 Getting started

本指南将帮助你在 Svelte 项目中开始使用 Lucide。确保你已经设置了 Svelte 环境。如果你还没有，可以使用 Vite 创建一个新的 Svelte 项目，或使用你选择的任何其他 Svelte 模板。

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

安装

🌐 Installation

pnpm

pnpm install @lucide/svelte@next

yarn

yarn add @lucide/svelte@next

npm

npm install @lucide/svelte@next

bun

bun add @lucide/svelte@next

导入你的第一个图标

🌐 Importing your first icon

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

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

每个图标都可以作为 Svelte 组件导入，该组件会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标会包含在最终的打包文件中，其余的图标会被进行摇树优化（tree-shaking）移除。

🌐 Each icon can be imported as a Svelte 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.

<script>
  import Camera from '@lucide/svelte/icons/camera';
</script>

<Camera />

属性

🌐 Props

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

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

名称	类型	默认值
size	数字	24
color	字符串	currentColor
stroke-width	数字	2
absoluteStrokeWidth	布尔值	false
default-class	字符串	lucide-icon

因为图标呈现为 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.

<script>
  import Camera from '@lucide/svelte/icons/camera';
</script>

<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