Lucide 中文文档

Appearance

Lucide Svelte ​

Svelte 应用的 Lucide 图标库实现。

安装 ​

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 构建，因此完全支持 tree-shaking。

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

示例 ​

默认用法：

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

<Skull />

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

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" />

属性 ​

nametypedefault
sizenumber24
colorstringcurrentColor
strokeWidthnumber2
absoluteStrokeWidthbooleanfalse

应用属性 ​

要自定义图标的外观，您可以直接将自定义属性作为属性传递给组件。组件接受所有 SVG 属性作为属性，这允许灵活地样式化 SVG 元素。请参阅 MDN 上 SVG 表示属性列表。

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

<Phone fill="#333" />

这将生成一个填充的电话图标。

类型 ​

该包包含所有图标的类型定义。这在您想要使用 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 图标一样的属性都可以传递以调整图标外观。

使用 Icon 组件 ​

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

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" />