Lucide Vue Next

适用于 Lucide 图标的 Vue 3 组件，利用 Composition API 和现代 Vue 功能。每个图标都是一个响应式 Vue 组件，渲染为内联 SVG，为 Vue 3 应用提供出色的性能和开发体验。

你可以实现：

• 将图标作为 Vue 3 组件使用，拥有完整的响应式和 TypeScript 支持
• 绑定图标属性到响应式数据和计算值
• 通过 props、slots 和 Vue 强大的模板系统自定义图标
• 与 Vue 3 的 Composition API 和 script setup 语法无缝集成
• 构建动态界面，让图标随应用状态变化而作出响应

安装

pnpm

pnpm install lucide-vue-next

yarn

yarn add lucide-vue-next

npm

npm install lucide-vue-next

bun

bun add lucide-vue-next

如何使用

Lucide 使用 ES 模块构建，因此完全可树摇（tree-shakable）。

每个图标都可以作为 Vue 组件导入，渲染为内联 SVG。这样，只有导入到项目中的图标会被包含在最终包中，其余图标会被树摇掉。

示例

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

<script setup>
import { Camera } from 'lucide-vue-next';
</script>

<template>
  <Camera
    color="red"
    :size="32"
  />
</template>

属性

名称	类型	默认值
size	number	24
color	string	currentColor
stroke-width	number	2
absoluteStrokeWidth	boolean	false
default-class	string	lucide-icon

应用属性

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

<template>
  <Camera fill="red" />
</template>

使用 Lucide Lab 或自定义图标

Lucide lab 是一个不属于 Lucide 主库的图标集合。

它们可以通过 Icon 组件使用。所有像普通 Lucide 图标一样的 props 都可以传递以调整图标外观。

使用 Icon 组件

这将基于传入的 iconNode 渲染一个 Lucide 图标组件。

<script setup>
import { Icon } from 'lucide-vue-next';
import { baseball } from '@lucide/lab';
</script>

<template>
  <Icon :iconNode="baseball" />
</template>

一个通用的图标组件

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

DANGER

下面的示例会导入所有 ES 模块，使用时请谨慎。导入所有图标会显著增加应用的构建体积，影响性能，尤其是在使用 Webpack、Rollup 或 Vite 等打包工具时。

Icon 组件示例

<script setup>
import { computed } from 'vue';
import * as icons from "lucide-vue-next";

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: Number,
  color: String,
  strokeWidth: Number,
  defaultClass: String
})

const icon = computed(() => icons[props.name]);
</script>

<template>
  <component
    :is="icon"
    :size="size"
    :color="color"
    :stroke-width="strokeWidth" :default-class="defaultClass"
  />
</template>

使用 Icon 组件

所有上述列出的其他 props 也可以在 Icon 组件上使用。

<template>
  <div id="app">
    <Icon name="Airplay" />
  </div>
</template>