Lucide 中文文档

Appearance

Lucide Svelte ​

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

你可以完成的事：

  • 将图标作为 Svelte 组件使用，支持完整的响应性和 TypeScript
  • 将图标属性绑定到响应式变量和存储
  • 创建根据应用程序状态动态响应的图标系统
  • 使用全面的 TypeScript 定义构建类型安全的接口
  • 通过直接导入图标和树摇优化捆绑包大小

安装 ​

sh
pnpm add @lucide/svelte
sh
yarn add @lucide/svelte
sh
npm install @lucide/svelte
sh
bun add @lucide/svelte

@lucide/svelte 仅适用于 Svelte 5，Svelte 4 请使用 lucide-svelte 包。

如何使用 ​

Lucide 是用 ES Modules 构建的，因此完全可树摇。

每个图标可作为 Svelte 组件导入，渲染为内联 SVG。这样，只有项目中实际导入的图标会被包含在最终捆绑包中，其余图标会被树摇移除。

示例 ​

默认用法：

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

<Skull />

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

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

<Camera color="#ff3e98" />

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

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

<CircleAlert color="#ff3e98" />

Props ​

nametypedefault
sizenumber24
colorstringcurrentColor
strokeWidthnumber2
absoluteStrokeWidthbooleanfalse

应用 Props ​

要自定义图标的外观，你可以将自定义属性直接作为 props 传递给组件。组件会接受所有 SVG 属性作为 props，从而实现对 SVG 元素的灵活样式化。参见 MDN 上的 SVG Presentation Attributes 列表。

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

<Phone fill="#333" />

这会得到一个填充的电话图标。

Types ​

该包为所有图标提供了类型定义。如果你想使用 svelte:component 指令动态加载图标，无论你使用 TypeScript 还是 JSDoc，这都非常有用。

TypeScript 示例 ​

svelte
<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
<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 示例 ​

svelte
<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
<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 文档。

与 Lucide lab 或自定义图标 ​

Lucide lab 是一组不包含在 Lucide 主库中的图标。

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

使用 Icon 组件 ​

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

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

一个通用图标组件 ​

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

DANGER

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

图标组件示例 ​

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

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

<Icon {...props} />
svelte
<script>
  import * as icons from '@lucide/svelte';
  export let name;
</script>

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

使用图标组件 ​

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

<LucideIcon name="Menu" />