Lucide Svelte

用于 Lucide 图标的 Svelte 组件，可与 Svelte 4 和 Svelte 5 无缝配合。每个图标都是一个响应式的 Svelte 组件，以内联 SVG 的形式渲染，提供出色的性能，并与 Svelte 的响应式系统和现代功能完美集成。

🌐 Svelte components for Lucide icons that work seamlessly with both Svelte 4 and Svelte 5. Each icon is a reactive Svelte component that renders as an inline SVG, providing excellent performance and integration with Svelte's reactive system and modern features.

你可以完成的事:

• 将图标用作 Svelte 组件，并实现完全的响应式和 TypeScript 支持
• 将图标属性绑定到响应式变量和 store
• 创建响应应用状态的动态图标系统
• 使用全面的 TypeScript 定义构建类型安全的接口
• 通过直接导入图标和 tree-shaking 优化包大小

安装

🌐 Installation

pnpm

pnpm add @lucide/svelte

yarn

yarn add @lucide/svelte

npm

npm install @lucide/svelte

bun

bun add @lucide/svelte

@lucide/svelte is only for Svelte 5, for Svelte 4 use the lucide-svelte package.

如何使用

🌐 How to use

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.

示例

🌐 Example

默认用法：

🌐 Default usage:

<script>
  import { Skull } from '@lucide/svelte';
</script>

<Skull />

可以传递其他属性来调整图标：

🌐 Additional props can be passed to adjust the icon:

<script>
  import { Camera } from '@lucide/svelte';
</script>

<Camera color="#ff3e98" />

为了更快的构建和加载时间，你可以直接从 @lucide/svelte/icons 目录导入图标：

🌐 For faster builds and load times, you can import icons directly from the @lucide/svelte/icons directory:

<script>
  import CircleAlert from '@lucide/svelte/icons/circle-alert';
</script>

<CircleAlert color="#ff3e98" />

属性

🌐 Props

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

应用属性

🌐 Applying props

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

🌐 To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on MDN.

<script>
  import { Phone } from '@lucide/svelte';
</script>

<Phone fill="#333" />

这将生成一个填充的调用图标。

🌐 This results a filled phone icon.

类型

🌐 Types

该包包含所有图标的类型定义。如果你希望使用 svelte:component 指令动态加载图标，无论是使用 TypeScript 还是 JSDoc，这都很有用。

🌐 The package includes type definitions for all icons. This is useful if you want to dynamically load icons with the svelte:component directive whether you are using TypeScript or JSDoc.

TypeScript 示例

🌐 TypeScript Example

Svelte 5

<script lang="ts">
  import { Home, Library, Cog, type Icon as IconType } from '@lucide/svelte';

  type MenuItem = {
    name: string;
    href: string;
    icon: typeof IconType;
  };

  const menuItems: MenuItem[] = [
    {
      name: 'Home',
      href: '/',
      icon: Home
    },
    {
      name: 'Blog',
      href: '/blog',
      icon: Library
    },
    {
      name: 'Projects',
      href: '/projects',
      icon: Cog
    }
  ];
</script>

{#each menuItems as item}
  {@const Icon = item.icon}
  <a href={item.href}>
    <Icon />
    <span>{item.name}</span>
  </a>
{/each}

Svelte 4

<script lang="ts">
  import { Home, Library, Cog, type Icon } from '@lucide/svelte';
  import type { ComponentType } from 'svelte';

  type MenuItem = {
    name: string;
    href: string;
    icon: ComponentType<Icon>;
  };

  const menuItems: MenuItem[] = [
    {
      name: 'Home',
      href: '/',
      icon: Home
    },
    {
      name: 'Blog',
      href: '/blog',
      icon: Library
    },
    {
      name: 'Projects',
      href: '/projects',
      icon: Cog
    }
  ];
</script>

{#each menuItems as item}
  {@const Icon = item.icon}
  <a href={item.href}>
    <Icon />
    <span>{item.name}</span>
  </a>
{/each}

JSDoc 示例

🌐 JSDoc Example

Svelte 5

<script>
  import { Home, Library, Cog } from '@lucide/svelte';

  /**
   * @typedef {Object} MenuItem
   * @property {string} name
   * @property {string} href
   * @property {typeof import('@lucide/svelte').Icon} icon
   */

  /** @type {MenuItem[]} */
  const menuItems = [
    {
      name: 'Home',
      href: '/',
      icon: Home
    },
    {
      name: 'Blog',
      href: '/blog',
      icon: Library
    },
    {
      name: 'Projects',
      href: '/projects',
      icon: Cog
    }
  ];
</script>

{#each menuItems as item}
  {@const Icon = item.icon}
  <a href={item.href}>
    <Icon />
    <span>{item.name}</span>
  </a>
{/each}

Svelte 4

<script>
  import { Home, Library, Cog } from '@lucide/svelte';

  /**
   * @typedef {Object} MenuItem
   * @property {string} name
   * @property {string} href
   * @property {import('svelte').ComponentType<import('@lucide/svelte').Icon>} icon
   */

  /** @type {MenuItem[]} */
  const menuItems = [
    {
      name: 'Home',
      href: '/',
      icon: Home,
    },
    {
      name: 'Blog',
      href: '/blog',
      icon: Library,
    },
    {
      name: 'Projects',
      href: '/projects',
      icon: Cog,
    }
  ];
</script>

{#each menuItems as item}
  {@const Icon = item.icon}
  <a href={item.href}>
    <Icon />
    <span>{item.name}</span>
  </a>
{/each}

有关输入 svelte:component 指令的更多详细信息，请参阅 Svelte 文档。

🌐 For more details about typing the svelte:component directive, see the Svelte documentation.

使用 Lucide Lab 或自定义图标

🌐 With Lucide Lab or custom icons

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

可以使用 Icon 组件来使用它们。所有像常规 Lucide 图标一样的属性都可以传递来调整图标的外观。

🌐 They can be used by using the Icon component. All props like the regular Lucide icons can be passed to adjust the icon appearance.

使用 Icon 组件

🌐 Using the Icon component

这将根据传递的 iconNode 创建一个图标，并渲染一个 Lucide 图标组件。

🌐 This creates a single icon based on the iconNode passed and renders a Lucide icon component.

<script>
import { Icon } from '@lucide/svelte';
import { pear, sausage } from '@lucide/lab';
</script>

<Icon iconNode={pear} />
<Icon iconNode={sausage} color="red"/>

一个通用图标组件

🌐 One generic icon component

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

🌐 It is possible to create one generic icon component to load icons, but it is not recommended.

DANGER

下面的示例导入了所有的 ES 模块，所以在使用时请谨慎。导入所有图标会显著增加应用的构建大小，从而对性能产生负面影响。在使用像 Webpack、Rollup 或 Vite 这样的打包工具时，这一点尤为重要。

图标组件示例

🌐 Icon Component Example

Svelte 5

<script>
  import * as icons from '@lucide/svelte';
  let { name, ...props } = $props();

  const Icon = icons[name];
</script>

<Icon {...props} />

Svelte 4

<script>
  import * as icons from '@lucide/svelte';
  export let name;
</script>

<svelte:component this={icons[name]} {...$$props} />

使用图标组件

🌐 Using the Icon Component

<script>
  import LucideIcon from './LucideIcon';
</script>

<LucideIcon name="Menu" />

无障碍

🌐 Accessibility

默认情况下，我们使用 aria-hidden="true" 从屏幕阅读器中隐藏图标。

🌐 By default, we hide icons from screen readers using aria-hidden="true".

你可以使用 aria-label 添加可访问性属性。

🌐 You can add accessibility attributes using aria-labels.

<script>
  import { Check } from '@lucide/svelte';
</script>

<Check aria-label="Task completed" />

有关无障碍最佳实践，请参阅我们的无障碍指南。

🌐 For best practices on accessibility, please see our accessibility guide.